javascript - 如何跟踪滚动到哪个 div 位置？

Question

如何跟踪滚动到哪个 div 位置？当 div 高度不固定且不确定(来自 db select)时，如果滚动到每个 div 然后做一些事情，如何做......

我是否应该将每个 div 位置推送到数组中，然后如果在数组中滚动位置然后滚动到关键 div？但这似乎会崩溃......

<div class="1">1</div> // 10px height
<div class="2">2</div> // 13px height
<div class="3">3</div> // 11px height
… // … height 

Answer 1

当 DOM 加载时，所有元素都有一个偏移量。

如果您想将所有顶部插入数组，请按以下方式操作。然后在滚动时，将窗口滚动位置与数组进行比较。如果它与数组编号匹配，则对该数组编号执行您想要的操作。 这是未经测试的代码，但理论存在

var divTops = [];  //Start an empty array
$(document).ready(function(){  //When the DOM loads
    $('div').each(function(e){ //For each div
        var top = $(this).offset().top; //Get its top
        divTops.push(top);  //and push that top into the array
    });
});

$(window).scroll(function(){  //When the user scrolls
    var scrolled = divTops.indexOf($(window).scrollTop());  //get the index number 
    if(scrolled === 0){  // Use the index number to control whatever is there.
        //Do something with the first div
    } else if(scrolled === 1){
        //Do something with the second div
    } else if(scrolled === 2){
        //Do something with the third div
    } else {

    }
});