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

Question

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

这是我的代码和一个 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

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

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