web-dev-qa-db-fra.com

vérifier si l'élément a défilé vers le haut

Je veux vérifier si un élément défile vers le haut avec un décalage de ~ 100px.

J'ai une page avec 5 sous-contenus et 2 classes pour créer des arrière-plans. Cela ressemble à ceci:

<div class="background1">
Content1
</div>
<div class="background2">
Content2
</div>
<div class="background1">
Content3
</div>
<div class="background2">
Content4
</div>
<div class="background1">
Content5
</div>

Maintenant, je veux vérifier, quand l'une de ces classes atteint le sommet en faisant défiler

Ceci est l'un de mes derniers essais:

$('.background1', '.background2').position(function(){
             if($(this).position().top == 100){
            alert('checkThis');
        }
        });

Je pense que c'est mon essai le plus proche maintenant ... bien sûr, ce code est dans document.ready et à la fin de mon code ....

TLDR: Comment vérifier si un élément a défilé vers le haut (et un certain décalage)?

jqueryhtmlscrollscrollto
14
Top Questions

Vous devez écouter l'événement de défilement, puis comparer chaque élément par rapport à la distance actuellement défilée, quelque chose comme:

$(window).on('scroll', function() {
    var scrollTop = $(this).scrollTop();

    $('.background1, .background2').each(function() {
        var topDistance = $(this).offset().top;

        if ( (topDistance+100) < scrollTop ) {
            alert( $(this).text() + ' was scrolled to the top' );
        }
    });
});
25
adeneo