当前位置：文江博客话题详情

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

发布于 2024-12-20 16:48:05 字数 99 浏览 4 评论 0原文

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

戒ㄋ 2024-12-27 16:48:05

这应该可以帮助你开始

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

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

回复收藏 0 原文

高速公鹿 2024-12-27 16:48:05

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

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

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

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

回复收藏 0 原文

贪了杯 2024-12-27 16:48:05

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

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

to set a div at position fixed you can use

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

回复收藏 0 原文

清风疏影 2024-12-27 16:48:05

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

请参阅 CSS 位置属性文档 :)

回复收藏 0 原文

~没有更多了~