0

ここにあるような「フローティング」トップナビゲーションを作成したいと思います。

ページを下にスクロールすると、トップナビゲーションはもちろんブラウザウィンドウから消えますが、ビューに戻り、一番下まで表示されたままになります。

CSSがで変更されていることはわかりますdiv#nav-bar-contentが、これらのスタイルがJavaScriptでいつ適用されるかはわかりません。

誰かがjQueryを使用してそれを実現する方法、またはZendeskソースコードのどこでこの例を見つけることができるかについてのポインターを持っているなら、それは素晴らしいことです。

事前にどうもありがとうございました！

キムよろしく

4

1 に答える 1

3

scrollイベントごとにメニューの位置を変更する必要があります。

<div class='menu'>Menu content</div>

$(window).scroll(function(e) {

    if ($(window).scrollTop() > 20) // 20 - offset from the top
        $('.menu').css({
            position: 'fixed',
            top: '0'
        });
    else
        $('.menu').css({
            position: 'static'
        });
});

更新: CSS を使用した静的ソリューション:

div.menu {
    position: fixed;
    top: 10px;
    z-index: 5000;
}
于 2012-08-20T19:35:04.040 に答える