6

ページの特定のポイント、ページの上部から特定のピクセル数までスクロールしたときに、divのcssを変更しようとしています。

ページの読み込み時に、divを静的に配置します。ページを下にスクロールし始めて、上からポイントに到達したら（たとえば、デモの目的で100px）、静的divを上から20pxのように固定するように変更します。これは、jqueryのcss（）プロパティを介して行われます。これにより、ページのずっと下の固定された20pxにとどまることができます。

その100pxのマークに達したときに、どのjqueryプロパティを使用して知ることができますか。誰かが一番上に戻ったら、これも元に戻して、ページが読み込まれたときの位置にdivが戻されるようにし、上から20pxではないようにします。

何か案は？

4

4 に答える 4

5

イベントを使用しscroll()てコードを実行し、scrollTop()メソッドを使用して現在の場所を確認できます。

ここにデモがあります: http://jsfiddle.net/EahRx/

（提供された値を使用したため、ジャンプがあります。実際のページでは見栄えが良くなると確信しています。）

var fixed = false;

$(document).scroll(function() {
    if( $(this).scrollTop() >= 100 ) {
        if( !fixed ) {
            fixed = true;
            $('#myDiv').css({position:'fixed',top:20}); // Or set top:20px; in CSS
        }                                           // It won't matter when static
    } else {
        if( fixed ) {
            fixed = false;
            $('#myDiv').css({position:'static'});
        }
    }
});

この変数は、コードが必要以上に実行されるfixedのを防ぎます。.css()

于 2011-01-04T20:05:21.350 に答える
1

scrollTop を使用してみてください:

$(window).scroll(function(){
    if  ($(window).scrollTop() >= 100){
        //CSS changes go here
    }
});
于 2011-01-04T20:05:02.000 に答える
0

これは私が見つけた素敵なjQueryプラグインで、うまく機能し、オフセットの設定や「接続」モードと「分離」モードの間のcssの変更などの便利な追加機能を提供します。

http://code.google.com/p/sticky-panel/

于 2012-07-17T19:26:37.867 に答える
0

私はちょうどこれを見つけました。これは本当に興味深いと思います。私はそれが好き。

于 2013-08-01T12:31:10.670 に答える