0

一連のブートストラップ ナビゲーション タブがあり、これらのタブ内には長い情報セクションがあります。問題は、私たちのチームがこのような長いタブにすべての情報を表示したくないため、タブ コンテナー要素に overflow: scroll プロパティを持たせたことです。これはうまく機能しますが、現在、非常に長いインライン スクロール セクションで立ち往生しており、最下部に到達するには 30 ～ 40 回のマウス スクロールが必要です。これにより、サイトのトラフィックが失われます。

固定位置の定義がブラウザウィンドウに対して固定されていることは知っていますが、親divの内側でブートストラップscrollspy nav-listメニューを使用し、そのdivの外側を横断できないようにする方法が必要です. そのため、class="fixed-to-top" 属性が機能するのと同じ方法でそれが機能する必要があります。これは機能的なナビゲーション メニューですが、何を試しても、固定された位置は常にブラウザーに対する相対位置に戻るようです。

私たちがやろうとしていることをすることは可能ですか？

4

1 に答える 1

0

以下のコードは完全な実装ではありませんが、どのように実行できるかを理解していただければ幸いです。つまり、固定 div がその親/コンテナーの外に出る場合は、position プロパティを変更します。

var $nlm = $('#navListMenu');
$(window).bind('scroll', function(){
    if($nlm.offset().top < $nlm.parent().offset().top)
        $nlm.css({ position:'absolute', top:0 });
    else 
        $nlm.css({ position:'fixed'});
}
于 2013-07-08T11:00:45.127 に答える