Question

我想制作一个菜单栏，它在滚动时固定在页面顶部。类似Facebook的顶级菜单。

另外，我想在菜单栏的左侧放置一个标识浮动的div，并在菜单栏的右侧放置一个导航浮标。

Answer 1

这应该让你入门

 <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;
    }

Answer 2

 #header {
        top:0;
        width:100%;
        position:fixed;
        background-color:#FFF;
    }

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

Answer 3

设置固定位置的div可以使用

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

Answer 4

postition:absolute;标记将元素相对于其直接父级定位。我注意到即使在示例中，也没有滚动的空间，当我尝试它时，它不起作用。因此，要取消Facebook浮动菜单，应使用position:fixed;标记。它将元素置换/保持在给定/指定的位置，页面的其余部分可以平滑滚动 - 即使是响应的元素。

如果可以，请参阅CSS postion attribute documentation：）

如何在滚动时将菜单栏固定在顶部

4 个答案: