3

可能重复：
如何保持标题静态，滚动时始终位于顶部？

我希望在向下滚动页面时始终将网站的标题部分保持在顶部。我该如何处理 CSS？还是我必须使用 Jquery ？

4

5 回答 5

3

你可以用 CSS 来做，这个类适用于 ID 为“header”的 div：

#header {
    position:fixed;
    top:0;
    z-index: 1000;
}
于 2012-04-27T06:13:29.697 回答
2

这是解释的代码：_

#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-27T06:35:24.633 回答
1

这是演示

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-28T04:27:50.027 回答
1

如果你想让你的标题 100% 宽度，那么你可以使用

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

}

于 2012-04-27T06:19:19.077 回答
0

Position: fixed;, 将其固定到窗口 Top:0;上 确保 Left:0;它 z-index:1000;在上面

于 2012-04-27T06:21:53.243 回答