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

Posted 2023-02-16

【中文标题】滚动时如何使菜单栏固定在顶部

【英文标题】：How can I make a menubar fixed on the top while scrolling

【发布时间】：2011-12-09 17:20:58

【问题描述】：

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

另外，我想要一个 div 在菜单栏的左侧保存徽标浮动，在菜单栏的右侧有一个导航浮动。

【问题讨论】：

通过固定位置

不要在 *** 上询问任何现成的代码，先按自己的方式尝试，如果出现错误，然后将代码粘贴到 *** 上或询问菜单栏错误。

【参考方案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;
    

【讨论】：

这就是我要找的。谢谢

此代码不回答问题。滚动时它不会保持固定。至少您需要使用position:fixed。我不知道为什么这有任何赞成票，以及为什么它是公认的答案，除了“这只是一些让你开始的代码”。

【参考方案2】：

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

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

【参考方案3】：

在固定位置设置一个div，你可以使用

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

【参考方案4】：

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

如果可以的话，请查看CSS postion attribute documentation :)

【讨论】：

是的，这是我心中的答案（如果他的意思是按含义固定），但如果他的意思是按术语固定，那么答案应该是位置：固定