Berechnen Offset oberen Rand der Elemente auf Scroll

Question

Wie zu überprüfen, welche Versatz top 3 Elemente auf meiner Seite haben, während ich scrollte? Ich habe 3 Abschnitte mit IDs #first, #second, #third, und ich möchte berechnen, welchen Versatz sie innerhalb des Fensters beim Scrollen haben.

Ich habe diese Elemente von ID wie folgt aus:

$scope.first = angular.element(document.querySelector('#first')); 
$scope.second = angular.element(document.querySelector('#second')); 

Aber jetzt weiß ich nicht, wie das bekommen überprüfen Offset- und einige Variablen auf true/false darauf basierenden zuweisen. Danke im Voraus!

Answer 1

Sie benötigen dafür nicht angular.element. document.querySelector('#first').offsetTop ist was du suchst. Darüber hinaus müssen Sie einen Listener Fenster scroll Ereignis hinzufügen, wenn Sie diese Werte zu erhalten, während Sie blättern:

const first = document.querySelector('#first'); 
const second = document.querySelector('#second'); 

const scrollListener =() => { 
    console.log(first.offsetTop, second.offsetTop) 
}; 
window.addEventListener('scroll', scrollListener); 

// Don't forget to remove listener 
$scope.$on('$destroy',() => { 
    window.removeEventListener(scrollListener); 
}); 

Answer 2

$ (Fenster) .scrollTop() ist nützlich für berechnen, wie viel der Benutzer nach unten gescrollt.

$(document).ready(function(){ 
    $(window).scroll(function() { 
     var first = $("#first"); 
     var winOffset_first = first.offset().top - $(window).scrollTop(); 
     console.log(winOffset_first) 
    }); 
});