计算滚动元素的偏移顶部答案

【问题标题】：Calculate offset top of elements on scroll计算滚动元素的偏移顶部
【发布时间】：2017-10-10 21:44:50
【问题描述】：

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

我通过 ID 获得了这些元素，如下所示：

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

但现在我不知道如何检查该偏移量并根据它为真/假分配一些变量。提前致谢！

【问题讨论】：

标签： javascript angularjs

【解决方案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);
});

【讨论】：

【解决方案2】：

$(window).scrollTop() 可用于计算用户向下滚动了多少。

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

【讨论】：