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/

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

1 个答案: