Question

这是我目前的解决方案，用于检查特定div是否到达页面顶部，我从这里得到https://stackoverflow.com/a/5279537/4671165

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

function Scroll() {
    var top = $('.element').offset().top - $(document).scrollTop();

    if (top < 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();    
}

然而，这似乎不是最有效的方法，但我无法弄清楚是什么。特别是因为我有更多的元素，然后在项目中只有3个。所以我正在寻找一种更有效的方式。

Answer 1

我用ES6把它放在一起。我相信这应该有效。这已经有一段时间了，因为我已经使用了getBoundingClientRect（）。

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();
    });
}

Answer 2

希望this有所帮助。它应该更容易使用，并且已经为您修复了很多错误。它是一个1.82 kb的文件，所以如果添加的话，其中没有太多无用的东西。

Answer 3

我找到了一个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>');

}

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

3 个答案: