【问题标题】:How can I make a menubar fixed on the top while scrolling滚动时如何使菜单栏固定在顶部
【发布时间】:2011-12-09 17:20:58
【问题描述】:

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

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

【问题讨论】:

  • 通过固定位置
  • 不要在 StackOverflow 上询问任何现成的代码,先按自己的方式尝试,如果出现错误,然后将代码粘贴到 StackOverflow 上或询问菜单栏错误。

标签: html css menubar css-position


【解决方案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 :)

      【讨论】:

      • 是的,这是我心中的答案(如果他的意思是按含义固定),但如果他的意思是按术语固定,那么答案应该是位置:固定
      猜你喜欢
      • 2012-10-27
      • 2012-10-27
      • 2014-03-03
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-08-28
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多