1

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 です。

動作を修正するには、スクロール方向を考慮する必要がありますか?

4

1 に答える 1

2

位置とマージントップを「リセット」する必要があります。

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/

于 2013-02-01T20:07:24.660 に答える