Bootstrap 3.0 を使用してスティッキー ナビゲーション バーを作成するにはどうすればよいですか?

ブートストラップを使用した固定ナビゲーション バーの作成

Web サイトが読み込まれるとき、ユーザーは多くの場合、ナビゲーション バーがページの上部に一貫して表示されることを好みます。 。ユーザーが下にスクロールすると、ナビゲーション バーが上にスクロールし、最終的には画面の上部に固定されるようになります。このガイドでは、Bootstrap 3.0 を使用してこれを実現する方法を説明します。

JQuery と JavaScript を使用した解決策:

<div> <h2>ここに欲しい</h2><br> <p>ちょうど調整してくださいこのウィンドウに一致する JavaScript サイズ</p><br></div></p>
<p><nav><pre class="brush:php;toolbar:false"><ul>

html, body {<br> 高さ: 4000px;<br>}</p>
<p>.navbar -fixed {<br> トップ: 0;<br> z-index: 100;<br> 位置: 固定;<br> 幅: 100%;<br>}</p>
<h1>body_div {</h1>
<p>上: 0;<br> 位置: 相対;<br> 高さ: 200px;<br> 背景色: green;<br>}</p>
<h1>バナー {</h1>
<p>幅: 100%;<br> 高さ: 273px;<br> 背景色: グレー;<br> オーバーフロー: 非表示;<br>}</p>
<h1>nav_bar {</h1>
<p>ボーダー: 0;<br> 背景色: #202020;<br> ボーダー半径: 0px;<br> マージン-ボトム: 0;<br> 高さ: 30px;<br>} </p>
<p>//以下の CSS はリンク用であり、スティッキーには必要ありませんnav<br>.nav_links {<br> margin: 0;<br>}</p>
<p>.nav_links li {<br> display: inline-block;<br> margin-top: 4px;<br>} </p>
<p>.nav_links li a {<br> パディング: 0 15.5px;<br> カラー: #3498db;<br> テキスト装飾: なし;<br>}<br>

$(document).ready( function() {<br> // 上の div の高さに一致するように以下の整数を変更します。私はこれを<br> //バナーと呼びました。  最後の数字に 1 を追加するだけです。  console.log($(window).scrollTop())<br> //nav を修正したいときに正確にスクロール位置を把握するため<br> //bar または div など何でも。  console.log に行き詰まってしまいました。  <br> //位置がわかったら削除してください。<br> $(window).scroll(function () {</p>
<pre class="brush:php;toolbar:false">console.log($(window).scrollTop());

if ($(window).scrollTop() > 550) {
  $('#nav_bar').addClass('navbar-fixed-top');
}

if ($(window).scrollTop() < 551) {
  $('#nav_bar').removeClass('navbar-fixed-top');
}

});
});
< /pre>
このソリューションは JavaScript を使用して、スクロール位置に基づいてナビゲーション バーに navbar-fixed-top クラスを追加および削除します。ナビゲーション バーが固定される正確なスクロール位置は、JavaScript コードの値を変更することで調整できます。

以上がBootstrap 3.0 を使用してスティッキー ナビゲーション バーを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。