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

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

注意：我需要将菜单栏“分解”为两个部分。 我无法修改HTML，只能修改CSS文件。

链接到示例。

有没有解决方案，如何在不使用JavaScript的情况下解决该问题？

Answer 1

您可以设置。 inner position:fixed;top:0

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

例