Afficher/masquer une image lors d'un scroll [Résolu]

Question

Posez votre question Signaler

Afficher/masquer une image lors d'un scroll [Résolu]

Dave17000 - 16 mars 2013 à 01:12 - Dernière réponse : @karamel

Messages postés: 1665
Date d'inscription: vendredi 9 mai 2008
Statut: Modérateur
Dernière intervention: 4 janvier 2019

- 18 mars 2013 à 12:18

Javascript / DHTML Posez votre question Signaler

Bonjour,
J'ai développer un petit code javascript pour que lorsque on descend dans la page, une image apparaisse.
Ce script fonctionne tres bien sur Chrome et Safari, mais ni sur Firefox ni sur IE9, et j'avoue ne pas comprendre pourquoi...
Quelqu'un aurait il une idée?
Voici le code

$(document).ready(function(){
   $(window).scroll(function(){
    if($("body").scrollTop() > 130)
   $("#image").css('visibility', 'visible').fadeIn(300);
    else
   $("#image").css('visibility', 'hidden').fadeOut(100);
  });
});

Merci d'avance

Afficher la suite

A voir également:

Votre réponse

Répondre au sujet

7 réponses

Signaler Commenter la réponse de @karamel

@karamel

Messages postés: 1665
Date d'inscription: vendredi 9 mai 2008
Statut: Modérateur
Dernière intervention: 4 janvier 2019

34 16 mars 2013 à 17:14

0

Merci

bonjour afin que le scroll soit reconu il faut se referencer au document.documentElement pour ie et ff et document.body pour chrome et safari c'est pour cette raison que sa ne marche pas avec ie et ff

Signaler Commenter la réponse de Dave17000

Dave17000 17 mars 2013 à 14:54

0

Merci

Merci pour cette info Kazma, mais étant une vrai buse en JS, j'avoue que je ne sais absolument pas comment placer ce bout de code dans mon script... j'ai bien essayer, mais étant trop novice, je ne trouve pas.
Un peu d'aide sur ce coup la me serait bien utile, je dois avouer!

Merci d'avance!

Signaler Commenter la réponse de @karamel

@karamel

Messages postés: 1665
Date d'inscription: vendredi 9 mai 2008
Statut: Modérateur
Dernière intervention: 4 janvier 2019

34 17 mars 2013 à 15:39

0

Merci

je ne connais que peut jquery mais essais tout de meme comme ceci j'ai juste rajouter une condition

$(document).ready(function(){
   $(window).scroll(function(){
    if($("body").scrollTop() > 130 || $("documentElement").scrollTop() > 130)
   $("#image").css('visibility', 'visible').fadeIn(300);
    else
   $("#image").css('visibility', 'hidden').fadeOut(100);
  });
});

Signaler Commenter la réponse de Dave17000

Dave17000 17 mars 2013 à 15:56

0

Merci

ah, j'ai répondu trop vite je vois... Merci Kazma, je vais quand même essayer ta solution juste pour voir la "différence"...

Signaler Commenter la réponse de Dave17000

Dave17000 17 mars 2013 à 15:59

0

Merci

Alors, j'ai tenté la solution de Kazma, et ca ne fonctionne pas... par contre, "html" et "body" dans les conditions, fonctionne...
Par contre, j'ai, dans mon code, ajouter une ligne "var" (ligne 2) qui ne sert absolument à rien (je tenais a le souligner quand même)

Signaler Commenter la réponse de @karamel

@karamel

Messages postés: 1665
Date d'inscription: vendredi 9 mai 2008
Statut: Modérateur
Dernière intervention: 4 janvier 2019

34 18 mars 2013 à 12:18

0

Merci

document.documentElement correspond au document html et apparemment jquery ne reconnais pas la syntaxe documentElement mais bon sa fonctionne et c'est l'essentiel

Votre réponse

Répondre au sujet

Posez votre question

Dave17000 · Accepted Answer · 2013-03-17T15:54:37+0100

Meilleure réponse

Signaler Commenter la réponse de Dave17000

Dave17000 17 mars 2013 à 15:54

3

Merci

Bon, et bien j'ai résolu mon probleme de facon "différente"...
Au cas ou ca aiderais quelqu'un, voici la "solution" (je ne sais pas si c'est la bonne, mais en attendant, ca fonctionne!)

$(function(){
var scroll = document.body.scrollTop&&document.documentElement;
    $(document).scroll(function() {
      if($('html').scrollTop() > 130 || $('body').scrollTop() > 130)
   $("#image").css('visibility', 'visible').fadeIn(300);
    else
   $("#image").css('visibility', 'hidden').fadeOut(100);
    });
});

Voila, merci à tous, car malgré tout, ca m'as donné quelques pistes à suivre

Dire « Merci » 3

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources 88 internautes nous ont dit merci ce mois-ci

Afficher/masquer une image lors d'un scroll [Résolu]

Votre réponse

Votre réponse

Votre réponse

Vous n'êtes pas encore membre ? inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !