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

Question

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

此外，我想将承载标志的div浮动在菜单栏的左侧，而将导航浮动在菜单栏的右侧。

- Jensen

---

通过使用“position: fixed”属性 - defau1t

不要在 StackOverflow 上询问现成的代码，首先按照自己的方式尝试编写，如果出现错误，则将您的代码粘贴到 StackOverflow 上或请求帮助解决菜单栏中的错误。 - Rahul Mandaliya

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

- Dominic Green

---

这段代码并没有回答问题。它在滚动时不会保持固定。至少你需要使用 position:fixed。我不知道为什么这个答案会有任何赞同，以及为什么它被接受为答案，除了“这只是一些让你开始的代码”。 - Doug S

Answer 2

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

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

- ceth

Answer 3

要将 div 设置为固定位置，您可以使用

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

- holographix

Answer 4

postition:absolute;标签将元素相对于其直接父元素定位。我注意到即使在示例中也没有滚动的空间，当我尝试时它也不起作用。因此，要实现Facebook浮动菜单，应使用position:fixed;标签。它将元素置于给定/指定位置，并且页面的其余部分可以平稳滚动-即使是响应式的部分也可以。请参见CSS position属性文档。

- Migisha

---

是的，这是我心中的答案（如果他的意思是固定的意思），但如果他的意思是术语上的固定，那么答案应该是position:fixed。 - PHPFan