當滾動時，使菜單欄固定在頂部

我有一個菜單欄，它由兩個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文件。例如

Link。

有沒有解決方案如何解決，而不使用JavaScript？

來源

2016-03-31 Petr Bečka

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

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

Example

來源

2016-03-31 23:33:56 LTasty

最好的，謝謝！ –

當滾動時，使菜單欄固定在頂部

回答

相關問題