如何在滚动时使菜单固定在顶部 [英] How can I make a menubar fixed on the top while scrolling

问题描述

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

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.

此外，我想要一个div，标志浮动在菜单栏的左边，导航浮动在菜单的右边。

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

这篇关于如何在滚动时使菜单固定在顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！