Question

我有一个菜单栏，它由两个div组成。最后它看起来只有一个菜单栏。当我向下滚动页面时，我需要将此菜单栏固定在顶部。

我的HTML代码：

<div id="body">
<header id="header">
<div class="inner">
    <div id="topmenu">
        <a href="#" class="login">Login</a>
    </div>

    <div id="social" class="icons">
        <a href="http://twitter.com/" class="twitter"><span>Twitter</span></a>
        <a href="http://www.facebook.com/" class="fb"><span>Facebook</span></a>
        <a href="http://www.linkedin.com/" class="linkedin"><span>Linked In</span></a>
    </div>
</div>
</header>
</div>

我的CSS：

#header .inner #topmenu {
    float: right;
    width: 50%;
    height: 30px;
    background-color: #5f5f5f;
}
#header .inner #topmenu .login {
    text-decoration: none;
    float: right;
    background:url('images/loginlink.png') no-repeat 40px 12px;
    padding-right: 20px;
    padding-top: 5px;
    color: white;
}
#header .inner .icons {
    float: left;
    width: 50%;
    height: 30px;
    background-color: #5f5f5f;
}
#header .inner .icons .twitter span {
    display: none;
}
#header .inner .icons .twitter {
    width: 20px;
    height: 20px;
    display: inline-block;
    background:url('images/i_twitter.png') no-repeat center center;
    padding-top: 10px;
    padding-left: 10px;
}

注意：我需要这个菜单栏＆＃34;破坏＆＃34;分成这两部分。我无法修改HTML，我只能修改CSS文件。

Link示例。

有没有解决方法如何在不使用JavaScript的情况下修复它？

Answer 1

您可以使用inner

设置。position:fixed;top:0

#header .inner{
  width:100%;
  position:fixed;
  top:0px;
}

Example

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

1 个答案: