2

読み込み時にページの上部から約 50px で始まるナビゲーション バーがあります。下にスクロールすると、ナビゲーション バーがページの一番上に「固定」され、残りのコンテンツをスクロールするときに表示されるようになります。これは、公式のブートストラップ チュートリアル Github サイトで nav-bar が行うことと似ています。
を使用して、ナビゲーションバーを所定の位置に保つことができます (ページを下にスクロールすると、常に上から 50 ピクセルになります)。

<ul class = "nav nav-list bs-docs-sidenav affix">

しかし、「-top」を上記に追加すると、次のようになります

<ul class = "nav nav-list bs-docs-sidenav affix-top">

ページを下にスクロールすると、ナビゲーション バーが動かなくなり、ビューから消えます。

「-top」のないjsfiddle

「-top」を使用したjsfiddle

下にスクロールするときにナビゲーション バーをページの上部に固定するにはどうすればよいですか?

4

1 に答える 1

15

修正することがいくつかあります。修正されたjsfiddleを参照してください。

  1. 接辞はjQueryを使用してJavaScriptコードとしてブートストラップに実装されており、BSのJSもjQueryも含まれていません
  2. 公式ドキュメントによると、要素の接辞をオンにするには、を使用します。を使用data-spy="affix"しclass="affix"ます。どうしてそんなことをしました？クラスaffixとaffix-topは異なる目的を果たします-それらはその時の接辞の状態を教えてくれます。現時点で要素が修正されているaffix場合、クラスはです。スクロール可能である場合、BSはクラスをに変更しaffix-topます。
  3. 要素を修正するタイミングをBSに通知する必要があります。ピクセル単位の距離（スクロールする必要がある量）は、属性で設定されますdata-offset-top。また、CSSで、修正時にナビゲーションがどのように表示されるかを指定します。上部にバインドされている場合（ウィンドウの境界線と要素の間にスペースが.affix { top:0; }ない場合）、それが実行されます。
于 2013-03-10T08:06:01.427 に答える