Afficher la balise uniquement lorsque la page défile en haut

Question

Comment puis-je détecter si un utilisateur fait défiler vers le bas avec jQuery? Je veux un div fixe pour montrer seulement quand le navigateur est dans 300px du dessus. Lorsque l'utilisateur fait défiler la marque 300px, il devrait disparaître. Lorsque l'utilisateur revient en haut, il doit masquer. Comment puis-je faire cela?

Answer 1

Joindre un écouteur de défilement à la fenêtre: http://docs.jquery.com/Events/scroll

Vérifiez ensuite les scrollTop de la fenêtre: http://docs.jquery.com/CSS

Lorsque scrollTop est inférieur à 300, show() le div, sinon hide() it.

Answer 2

var docElem = $(document.documentElement) 
docElem.scroll(function(e) { 
    if(docElem.scrollTop() < 300) { 
     whatever.show(); 
    } else { 
     whatever.hide(); 
    } 
}); 

Vous pourriez avoir à utiliser un autre élément (comme docElem) dans les différents navigateurs, mais cela devrait fonctionner dans Firefox. (Je ne l'ai pas testé)

EDIT: Plus jQuery

Answer 3

scrollTop et scrollY on dirait qu'ils vous aideront à démarrer dans IE et Firefox. Je ne suis pas sûr des autres navigateurs.

Answer 4

juste vérifier la position de la fenêtre sur l'événement de défilement, et la comparer avec la position de l'élément:

$(window).scroll(function(e){ 
    $el = $('.myElement'); 
    if ($(this).scrollTop() > $el.offset().top){ 
    $el.hide(); 
    } else { 
    $el.show(); 
}); 

Exécuter cet exemple here.