Question

可能重复：
How to keep the header static, always on top while scrolling?

我希望在向下滚动页面时始终将网站的标题部分保持在最顶层。我怎么能用CSS？还是我必须使用Jquery？

Answer 1

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

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

Answer 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 */
}

保持代码注释始终是好的，所以如果你忘记了什么，你可以看看评论。：）

Answer 3

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

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

}

Answer 4

以下是DEMO

Html IS：

<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;}

Answer 5

Position: fixed;，会将其修复到窗口 Top:0;会确保它在那里，可以添加Left:0;以确保它也被删除， z-index:1000;会确保它保持在页面上的其他所有内容

标题部分始终位于网站的顶部

5 个答案: