スクロールの要素のオフセットの上端を計算する

Question

スクロール中にページのトップ3のどの要素のオフセットを確認するにはどうすればよいですか？私はIDが#first, #second, #thirdの3つのセクションがあり、スクロール中にウィンドウ内にどのようなオフセットがあるかを計算したい。

私はこのような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) 
    }); 
});