如何找到多个 div 到达顶部？

Question

我有一个分为多个部分的调查页面。当用户滚动时，每个部分的 header 会一直停留在屏幕顶部，直到到达下一个部分。我能够为第一部分和第二部分做到这一点，但我不确定如何为第三部分做到这一点。一定有更好的方法来做到这一点。

这是我的代码和一个jsfiddle

谢谢

var s = $("#block2 .question-title-block");
    var pos = s.position();          
        $(window).scroll(function() {           
             var windowpos = $(window).scrollTop();     
            if ($(this).scrollTop() > 404) {          
            $('#block1 .question-title-block').addClass("sticky");                                   
                           if (windowpos >= pos.top) {
                         $('#block2 .question-title-block').addClass("sticky");
                         $('#block1 .question-title-block').removeClass("sticky");
        }  
        else{           
             $('#block2 .question-title-block').removeClass("sticky");          
        }
    } 
    else{
      $('#block1 .question-title-block').removeClass("sticky");
      $('#block2 .question-title-block').removeClass("sticky");    
    }   
 })

Answer 1

如果您希望将其应用于任意多个元素，请不要单独使用它们，而是使用它们的 class。您可以执行以下操作：

var titleBlocks = $(".question-title-block");

$(window).scroll(function() {

    var windowpos = $(window).scrollTop();

    titleBlocks.each(function(){

        $(this).toggleClass('sticky', $(this).parent().offset().top <= windowpos);

    });

});

JS Fiddle Demo

Answer 2

试试这个（允许任意数量的问题块）：

var containers = $('.question-block-container');
$(window).scroll(function () {
    var windowpos = $(window).scrollTop();
    containers.each(function () {
        var container = $(this),
            title = container.find('.question-title'),
            contOffsetTop = container.offset().top,
            conOffsetBottom = contOffsetTop + container.outerHeight() + 60; // 60 is margin bottom

        if (windowpos >= contOffsetTop && windowpos <= conOffsetBottom) {
            if (!title.hasClass("sticky")) {
                title.addClass("sticky");
            }
        } else if (title.hasClass("sticky")) {
            title.removeClass("sticky");
        }
    });
});

Example

如何找到多个 div 到达顶部？

How to find Multiple div reach top?

html

javascript

css

jquery

scroll

JS Fiddle Demo