0

位置が「静的」の上部ナビゲーション バーがありますが、ユーザーがナビゲーション バーの高さを超えてスクロールすると、位置が「固定」に変わり、ナビゲーション バーがウィンドウの上部に接続されます。また、ページの上部にスクロールして戻ると、「静的」に戻ります。

ナビゲーション バーには、ページの上部に残る静的なバナー div があります。ウィンドウの上部がナビゲーション バーの下にスクロールすると、位置が「固定」に変わります。

ページの長さがスクロールを必要とするのにかろうじて十分であるが、スクロールの高さとナビゲーションバーを「固定」に保つのに十分ではない場合、ジッターが発生しているため、ページの下部までスクロールすると、ナビゲーションバーがジッターの間でジッターします「静的」と「固定」。

セットアップ方法の jsfiddle を投稿しましたが、経験しているため、問題を再現することはできません: http://jsfiddle.net/bB7Bf/

HTML:

<div id="topMaterial">Static Top doesn't move</div>
<div id="ktNavbar">topbar that sticks to top of window after scrolls below static height</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

JS:

$(function() {
var navScroll = $(window).scroll(function() {

    var scrollPosition = $(this).scrollTop();

    if (scrollPosition > 120) $("#ktNavbar").css({
        "position": "fixed",
        "top": 0,
        "left": 0,
        "right": 0
    });

    else $("#ktNavbar").css("position", "static");
    });
});​

この「静的」と「固定」の間のスクロールの条件付きジッターを防ぐための回避策はありますか?

4

1 に答える 1

1

常に固定したままにして、下にあるコンテンツに上マージンを追加してみませんか? js は必要ありません。

于 2012-10-30T20:30:52.993 に答える