jquery - 具有固定位置和滚动的多个 div

Question

我有 4 个 div，我想向下滚动并覆盖所有这些 div。但是...保持当前 div 与浏览器顶部的固定位置

只有向下滚动才能很好地工作。但是当我向上滚动失败。

您可以查看此小提琴http://jsfiddle.net/rtSKj/以获取演示

这是js代码

$(document).ready(function() {
    $(window).scroll(function () {

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

        if(scrollY>=500){
            $('#block2').css({'position': 'fixed', 'margin-top': 0});
            $('#block3').css({'margin-top': '1000px'});
        }

        if(scrollY>=1000){
            $('#block3').css({'position': 'fixed', 'margin-top': 0});
            $('#block4').css({'margin-top': '1500px'});
        }

    });

});

注意：div的高度为：500px；

我应该考虑滚动方向来修复行为吗？

Answer 1

您需要“重置”位置和边距顶部。

if(scrollY<500) {
  $('#block2').css({'position': 'relative', 'margin-top': '500px'});
}
if(scrollY<1000) {  
  $('#block3').css({'position': 'relative','margin-top': '1000px'});
}

请参阅更新的小提琴：http: //jsfiddle.net/rtSKj/14/