Javascript 如何检查每个div是否达到页面顶部？

这是我目前检查特定div是否到达页面顶部的解决方案，我从这里得到

document.addEventListener（“滚动”，滚动，假）；
函数滚动（）{
var top=$（'.element'）.offset（）.top-$（document.scrollTop（）；
如果（顶部<150）{
var textvariable=$（'.text'）.text（）；
} 
}

但是我希望每次当一个不同的div到达页面的顶部时，它都能做些什么，因此我现在有

    var top1 = $('.element1').offset().top - $(document).scrollTop();
    var top2 = $('.element2').offset().top - $(document).scrollTop();
    var top3 = $('.element3').offset().top - $(document).scrollTop();

if (top1 < 150 && top2 > 150){
   var textvariable = $('.text1').text();
} 

if (top1 < 150 && top2 < 150 && top3 > 250){
    var textvariable = $(.text2').text();
} 

if (top2 < 150 && top3 < 250){
    var textvariable = $(.text3').text();    
} 

var top1=$（'.element1'）.offset（）.top-$（document.scrollTop（）；
var top2=$（'.element2'）.offset（）.top-$（document.scrollTop（）；
var top3=$（'.element3'）.offset（）.top-$（document.scrollTop（）；
如果（top1<150和top2>150）{
var textvariable=$（'.text1'）.text（）；
} 
如果（top1<150&&top2<150&&top3>250）{
var textvariable=$（.text2'）.text（）；
} 
如果（top2<150和top3<250）{
var textvariable=$（.text3'）.text（）；
} 

---

然而，这似乎不是最有效的方法，但我不知道是什么。特别是因为我有更多的元素，而在项目中只有3个。因此，我正在寻找一种更有效的方法。

我使用ES6将其组合在一起。我相信这应该行得通。但我已经有一段时间没有使用getBoundingClientRect（）了

var divs=document.querySelectAll（'div'）； 文件。添加的文本列表（“滚动”，滚动，假）； 函数滚动（）{ 每个部门（（备忘录、索引）=>{ 让divTop=memo.getBoundingClientRect（）.top；

---

if（divTop希望有帮助。它应该更容易使用，并且已经为您修复了很多错误。它是一个1.82 kb的文件，因此如果添加，实际上没有太多无用的东西。

我找到了一个jquery解决方案

function ScrollStart() {

var scrolled = $(this).scrollTop();


/*filter current element at the top with a certain class & give it active class*/

$('.step').removeClass('activetext').filter(function() {
     return scrolled <= $(this).offset().top + $(this).height() - 50 && scrolled >= $(this).offset().top - 50;
}).addClass('activetext');

/* make exclusion for first element */

var boven = $('.first').offset().top - $(document).scrollTop();

if (boven > 0){     
   $('.first').addClass('activetext');
} 

/*make exclusion for last element*/

var bottom = $('.last').offset().top - ($('.last').height()/5) - $(document).scrollTop();

if (bottom < 150){
    $('.step').removeClass('activetext')
   $('.last').addClass('activetext');
} 
else{ 
    $('.last').removeClass('activetext')
}

    /* give variable 'text' the text of the active class & append it */

var text = $('.activetext .headertekst').text();
$('.dropbtn').empty();
$('.dropbtn').append(text);
    $('.dropbtn').append('<img src="images/downarrow.svg" galleryimg="no"></img>');

函数ScrollStart（）{
var scrolled=$（this.scrollTop（）；
/*在顶部用特定等级过滤电流元件，并将其设置为活动等级*/
$（'.step'）.removeClass（'activetext'）.filter（函数（）{
return scrolled=$（this）.offset（）.top-50；
}).addClass（'activetext'）；
/*对第一个元素进行排除*/
var boven=$（'.first'）.offset（）.top-$（document.scrollTop（）；
如果（boven>0）{
$（'.first'）.addClass（'activetext'）；
} 
/*排除最后一个元素*/
var bottom=$（'.last'）.offset（）.top-（$（'.last'）.height（）/5）-（document.scrollTop（）；
如果（底部<150）{
$（'.step'）.removeClass（'activetext'））
$（'.last'）.addClass（'activetext'）；
} 
否则{
$（'.last'）.removeClass（'activetext'））
}
/*为变量“text”指定活动类的文本并附加它*/
var text=$（'.activetext.headertekst'）.text（）；
$（'.dropbtn'）.empty（）；
$（'.dropbtn'）。追加（文本）；
$（'.dropbtn'）。追加（''）；

---

}

制作一把小提琴，从那里可以很容易地帮助你。

var divs = document.querySelectAll('div');

document.addEventListener("scroll", Scroll, false);

function Scroll() {
    divs.forEach((memo,index) => {
        let divTop = memo.getBoundingClientRect().top;
        if (divTop <= 0) {
            var textvariable = $('.text' + index).text();
    });
}

function ScrollStart() {

var scrolled = $(this).scrollTop();


/*filter current element at the top with a certain class & give it active class*/

$('.step').removeClass('activetext').filter(function() {
     return scrolled <= $(this).offset().top + $(this).height() - 50 && scrolled >= $(this).offset().top - 50;
}).addClass('activetext');

/* make exclusion for first element */

var boven = $('.first').offset().top - $(document).scrollTop();

if (boven > 0){     
   $('.first').addClass('activetext');
} 

/*make exclusion for last element*/

var bottom = $('.last').offset().top - ($('.last').height()/5) - $(document).scrollTop();

if (bottom < 150){
    $('.step').removeClass('activetext')
   $('.last').addClass('activetext');
} 
else{ 
    $('.last').removeClass('activetext')
}

    /* give variable 'text' the text of the active class & append it */

var text = $('.activetext .headertekst').text();
$('.dropbtn').empty();
$('.dropbtn').append(text);
    $('.dropbtn').append('<img src="images/downarrow.svg" galleryimg="no"></img>');