计算滚动上元素的偏移量顶部

Question

如何检查页面滚动时我的页面上哪些偏移量最大的3个元素？我有3个部分ID为#first, #second, #third，我想计算他们在窗口内滚动时有什么偏移量。

我的ID这些元素是这样的：

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

但现在我不知道怎么去检查偏移和分配一些变量，基于它真/假。提前致谢！

Answer 1

您不需要angular.element。 document.querySelector('#first').offsetTop就是你要找的。还需要添加一个侦听窗口scroll事件，如果你想获得这些值，而您滚动：

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

$（窗口）.scrollTop（）可以计算出用户已经多少向下滚动有用。

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