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

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到达顶部？

2 个答案:

JS Fiddle Demo