スクロール時にメニューバーを上に固定

Question

メニューバーがあり、2つの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; 
} 

注：私はこのような2つの部分に "壊れた" このメニューバーを持っている必要があります。私はHTMLを変更することはできません、私はCSSファイルだけを変更することができます。

Linkを例とします。

JavaScriptを使用せずに修正する方法はありますか？

Answer 1

設定できます。 position:fixed;top:0

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

Example