スクロール中にページの上部に固定されるメニューバーを作成したいと思います。 Facebookのトップメニューのようなもの。
また、メニューバーの左側にロゴフロートを保持するdiv、メニューバーの右側にナビゲーションフロートを保持する必要があります。
これで開始できます
<div class="menuBar">
<img class="logo" src="logo.jpg"/>
<div class="nav">
<ul>
<li>Menu1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
</div>
body{
margin-top:50px;}
.menuBar{
width:100%;
height:50px;
display:block;
position:absolute;
top:0;
left:0;
}
.logo{
float:left;
}
.nav{
float:right;
margin-right:10px;}
.nav ul li{
list-style:none;
float:left;
}
#header {
top:0;
width:100%;
position:fixed;
background-color:#FFF;
}
#content {
position:static;
margin-top:100px;
}
使用可能な固定位置にdivを設定するには
position:fixed
top:0;
left:0;
width:100%;
height:50px; /* change me */
postition:absolute;
タグは、要素をその直接の親に対して相対的に配置します。例でさえ、スクロールする余地がないことに気づきました、そして、私がそれを試したとき、それは機能しませんでした。したがって、facebookのフローティングメニューを使用するには、代わりにposition:fixed;
タグを使用する必要があります。与えられた/指定された場所で要素を移動/維持し、ページの残りの部分はスムーズにスクロールできます-レスポンシブな場所であってもです。
CSS postion attribute documentation をご覧ください:)