3

重複の可能性：
スクロール中は常にヘッダーを上に固定して、ヘッダーを静的に保つ方法は？

ページを下にスクロールしている間、Webサイトのヘッダーセクションを常に一番上に置きたいです。CSSでどのようにできますか？または、Jqueryを使用する必要がありますか？

4

5 に答える 5

3

あなたはCSSでそれを行うことができます、このクラスは「ヘッダー」のIDを持つ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 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;}
​
于 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 に答える