ウェブページの静的ヘッダーを作成するにはどうすればよいですか？

Question

私はウェブサイトのヘッダーを作成しようとしています。私はhttps://stackoverflow.com/ウェブサイトにあるように、ヘッダー（ロゴ、検索バー、およびナビを含む）をスクロールして1つの場所に静的にしたくないようにします。

Answer 1

今後の参考のためのコードを提供していますが、ページの上部に固執したい要素を選択するために、CSSセレクタを使用するのがベスト。プロパティtop:0のposition: fixedを使用すると、基本的にDOMの流れから取り除かれます。

としましょう：

HTML

<div class="navbar"> 
<ul> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
</ul> 
</div> 

CSS

.navbar { 
    position: fixed; 
    top: 0; 
    width: 100%; 
    overflow: hidden; 
} 

ブートストラップは、開発時間を減らすことができますし、数多くのシナリオのドキュメントを持っているCSSフレームワークを使用してテストされています、1つは固定されたnavです。それを確認してくださいhttps://v4-alpha.getbootstrap.com/examples/navbar-top-fixed/

Answer 2

だけ追加します。

position: fixed; 

あなたのヘッダークラ​​スに

Answer 3

position: fixedをあなたが探しているものと考えられます。それをCSSであなたのnavbarに追加すれば、あなたは金色になるはずです。

Fiddle