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

- 16 mars 2013 à 01:12 - Dernière réponse :
Messages postés
1663
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
3 novembre 2018
- 18 mars 2013 à 12:18
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 

Votre réponse

7 réponses

Meilleure réponse
- 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

Merci Dave17000 3

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 88 internautes ce mois-ci

Commenter la réponse de Dave17000
Messages postés
1663
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
3 novembre 2018
- 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
Commenter la réponse de @karamel
- 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!
Commenter la réponse de Dave17000
Messages postés
1663
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
3 novembre 2018
- 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);
  });
});
Commenter la réponse de @karamel
- 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"...
Commenter la réponse de 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)
Commenter la réponse de Dave17000
Messages postés
1663
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
3 novembre 2018
- 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
Commenter la réponse de @karamel

Vous n'êtes pas encore membre ?

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

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.