0

ドキュメントに 5 つの div があります。スクロールした後、div が特定の位置 (たとえば 100px) に達すると固定されますが、一部の div はその位置を超えたときにのみ固定されます。私は0pxで試しましたが、同じことですが、問題は100pxでより目立ちます。誰かがこの問題を解決するのを手伝ってくれます

CSS

#f1{
width:600px;
    z-index:1;
}
#f2{
width:600px;
    z-index:2;
}
#f3{
width:600px;
    z-index:3;
}
#f4{
width:600px;
    z-index:4;
}
#f5{
width:600px;
z-index:5;
}
.fixed{
position:fixed;
top:100px;
}

js

    $( ドキュメント ).ready(function() {
        var f1 = $('#f1').offset().top ;
        var f2 = $('#f2').offset().top ;
        var f3 = $('#f3').offset().top ;
        var f4 = $('#f4').offset().top ;
        var f5 = $('#f5').offset().top ;
        $(window).scroll(関数 (イベント) {
            var y = $(this).scrollTop()+100;
            もし (y >= f1) {
                $('#f1').addClass('fixed');
            } そうしないと {
                 $('#f1').removeClass('fixed');
             }

             もし (y >= f2) {
                $('#f2').addClass('fixed');
            } そうしないと {
                 $('#f2').removeClass('fixed');
             }

             もし (y >= f3) {
                $('#f3').addClass('fixed');
            } そうしないと {
                 $('#f3').removeClass('fixed');
             }

             もし (y >= f4) {
                $('#f4').addClass('fixed');
            } そうしないと {
                 $('#f4').removeClass('fixed');
             }

             もし (y >= f5) {
                $('#f5').addClass('fixed');
            } そうしないと {
                 $('#f5').removeClass('fixed');
             }

        });
    });

html

<div style="width:600px; margin:0 auto; background:#ccc">
<p>
some long text here
</p>
<div id="f1" style="background:#000; color:#fff">
div 1
</div>
<p>
some long text here
</p>
<div id="f2" style="background:#000; color:#fff">
div 2
</div>
<p>
some long text here
</p>
<div id="f3" style="background:#000; color:#fff">
div 3
</div>
<p>
some long text here
</p>
<div id="f4" style="background:#000; color:#fff">
div 4
</div>
<p>
some long text here
</p>
<div id="f5" style="background:#000; color:#fff">
div 5
</div>
<p>
some long text here
</p>
</div>

ここで結果を見ることができますhttp://jsfiddle.net/hPs6p/

自分で問題を見つけたので、みんなありがとう

js

$( ドキュメント ).ready(function() {

    $(window).scroll(関数 (イベント) {
        var y = $(this).scrollTop()+100;
        var f1 = $('#f1').offset().top ;
        var f2 = $('#f2').offset().top ;
        var f3 = $('#f3').offset().top ;
        var f4 = $('#f4').offset().top ;
        var f5 = $('#f5').offset().top ;
        もし (y >= f1) {
            $('#f1').addClass('fixed');
        } そうしないと {
             $('#f1').removeClass('fixed');
         }

         もし (y >= f2) {
            $('#f2').addClass('fixed');
        } そうしないと {
             $('#f2').removeClass('fixed');
         }

         もし (y >= f3) {
            $('#f3').addClass('fixed');
        } そうしないと {
             $('#f3').removeClass('fixed');
         }

         もし (y >= f4) {
            $('#f4').addClass('fixed');
        } そうしないと {
             $('#f4').removeClass('fixed');
         }

         もし (y >= f5) {
            $('#f5').addClass('fixed');
        } そうしないと {
             $('#f5').removeClass('fixed');
         }

    });
});

このjsは問題を解決します

div1、div2、div3、div4、および div 5 のオフセットは、スクロール イベントを発生させる前に 1 回計算され、div1 が固定されると流れがなくなるため、他の div の場合、解決策はスクロール イベントで div のオフセットを計算することです。一部の要素がフローから外れた後の実際のオフセットを取得します

http://jsfiddle.net/6TjgY/

4

2 に答える 2

0

各スクロールを修正する必要があります。

if(scrollTop>200){
    $('#header').css({ 'position': 'fixed', 'top' : '0' });
} 
else{
    $('#header').css({ 'position': 'relative', 'top': '200px'});
}
if(scrollTop>300){
    $('#header2').css({ 'position': 'fixed', 'top' : '100px' });
} 
else{
    $('#header2').css({ 'position': 'relative', 'top': '400px'});
}

これを試してみてください。少なくとも始められるはずです

于 2014-01-04T13:17:37.397 に答える
-1

このプラグインを使用して、好きな場所で要素を修正できます: https://github.com/gwdhost/SnapToTop

于 2015-07-10T13:14:19.270 に答える