具有固定位置和滚动的多个 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/