頁眉部分總是在網站頂部

可能重複：
How to keep the header static, always on top while scrolling?頁眉部分總是在網站頂部

我想在上面始終保持網站的標題部分，而向下滾動頁面。我該如何處理CSS？或者我必須使用JQuery？

2012-04-27 Shaolin

這是非常簡單 - 使用固定的定位。請參閱Juhana提到的問題。 – Faust 2012-04-27 06:06:15

這裏是DEMO

HTML是：

<div id="header" class="fixed" style="display: block; top: 0px; "> 
     <div class="inner"> 
     <!-- .inner --> 
     </div> 
     <div class="shadow" style="display:block;"><span></span></div> 
</div> 

<div style="height:600px;"><a href="http://imgur.com/k9hz3"><img src="http://i.imgur.com/k9hz3.jpg" title="Hosted by imgur.com" alt="" /></a></div> 
<div style="height:600px;"><a href="http://imgur.com/TXuFQ"><img src="http://i.imgur.com/TXuFQ.jpg" title="Hosted by imgur.com" alt="" /></a></div>

CSS是：

#header{height: 48px;width: 100%;z-index: 1000;} 

.fixed {background: url(http://static.tumblr.com/njty47g/Omoleufdi/topbar_bg.png) left top repeat-x; 
position: fixed;left: 0; 
-webkit-box-shadow: 0 7px 8px rgba(0, 0, 0, 0.12); 
-moz-box-shadow: 0 7px 8px rgba(0, 0, 0, 0.12); 
box-shadow: 0 7px 8px rgba(0, 0, 0, 0.12);} 

.inner {width: 940px;margin: 0 auto;height: 48px;} 


.shadow{width: 100%;height: 5px;position: absolute;left: 0;bottom: -5px;z-index: 500;display: none;}

來源

2012-04-28 04:27:50

你可以用CSS做，這個類將用於與「頭」的ID的DIV工作：

#header { 
    position:fixed; 
    top:0; 
    z-index: 1000; 
}

來源

2012-04-27 06:13:29 ActiveDan

，如果你想使你的頭部寬度爲100％，那麼你可以使用

.headerDiv{ 
position:fixed; 
top:0; 
width:100%;

}

來源

2012-04-27 06:19:19

Position: fixed;，將其固定在窗口 Top:0;將確保它在那裏， Left:0;可以添加，以確保它的左太， z-index:1000;將確保它保持在您的網頁

來源

2012-04-27 06:21:53 vonHippie

繼承人的代碼上一切解釋說：_

#header { 
    position: fixed; /* keeps the element in a fixed position no matter how much you scroll */ 
    top: 0; /* to keep it on the top */ 
    width: 100%; /* to keep its width across the screen no matter how big the screen is */ 
    z-index: 1000; /* to make sure its infront of everything */ 
}

它總是很好的保持你的代碼註釋，以便如果你忘記了什麼，你可以看看評論。 :)

來源

2012-04-27 06:35:24

頁眉部分總是在網站頂部

回答

相關問題