Сделать панель меню фиксированной сверху при прокрутке

Question

У меня есть панель меню и состоит из двух разделов. В конце он выглядит как только одна панель меню. И мне нужно, чтобы эта панель меню была зафиксирована сверху, когда я прокручиваю страницу вниз.

Мой 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.

Link к примеру.

Есть ли какое-либо решение, как исправить это, не используя JavaScript?

Answer 1

Вы можете установить. inner с position:fixed;top:0

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

Example