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

I'd like to make a menubar, which is fixed on the top of the page while scrolling. Something like the top menu in Facebook.

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

Also, I want a div holding the logo float at the left of menubar, and a nav float at the right of the menubar.

此外,我想要一个div保持菜单左侧的徽标浮动,以及菜单栏右侧的导航浮动。

4 个解决方案

#1

This should get you started

这应该让你开始

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

#2

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

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

#3

to set a div at position fixed you can use

将div设置为固定的位置即可使用

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

#4

The postition:absolute; tag positions the element relative to it's immediate parent. I noticed that even in the examples, there isn't room for scrolling, and when i tried it out, it didn't work. Therefore, to pull off the facebook floating menu, the position:fixed; tag should be used instead. It displaces/keeps the element at the given/specified location, and the rest of the page can scroll smoothly - even with the responsive ones.

帖子:绝对;标签将元素相对于它的直接父元素定位。我注意到即使在示例中,也没有滚动的空间,当我尝试它时,它不起作用。因此,要拉掉脸书浮动菜单,位置:固定;应该使用标签代替。它取代/保持元素在给定/指定的位置,页面的其余部分可以平滑滚动 - 即使是响应的。

Please see CSS postion attribute documentation when you can :)

你可以看:) CSS postion属性文档:)

#1