web-dev-qa-db-ja.com

スクロール中に上部にメニューバーを固定するにはどうすればよいですか

スクロール中にページの上部に固定されるメニューバーを作成したいと思います。 Facebookのトップメニューのようなもの。

また、メニューバーの左側にロゴフロートを保持するdiv、メニューバーの右側にナビゲーションフロートを保持する必要があります。

htmlcssmenubarcss-position
12
Jensen

これで開始できます

 <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;
    }
15
Dominic Green
 #header {
        top:0;
        width:100%;
        position:fixed;
        background-color:#FFF;
    }

    #content {
        position:static;
        margin-top:100px;
    }
14
demas

使用可能な固定位置にdivを設定するには

position:fixed
top:0;
left:0;
width:100%;
height:50px; /* change me */
4
holographix

postition:absolute;タグは、要素をその直接の親に対して相対的に配置します。例でさえ、スクロールする余地がないことに気づきました、そして、私がそれを試したとき、それは機能しませんでした。したがって、facebookのフローティングメニューを使用するには、代わりにposition:fixed;タグを使用する必要があります。与えられた/指定された場所で要素を移動/維持し、ページの残りの部分はスムーズにスクロールできます-レスポンシブな場所であってもです。

CSS postion attribute documentation をご覧ください:)

3
Migisha