常にページの一番上に固定ヘッダーがあるページを作成しました。ページには背景画像があり、ヘッダーは透明です。
私の基本的なレイアウト:
<div id="header-container">
<header class="wrapper">
<h1 id="title">Headline</h1>
</header>
<nav id="main-navigation" class="wrapper">
<ul>
<li><a href="#">Nav Item</a></li>
</ul>
</nav> <!-- #main-navigation -->
</div> <!-- #header-container -->
<div id="main-container" class="wrapper">
<article id="main">
<section class="content">
<h2>some headline</h2>
<p>content stuff</p>
</section>
</article> <!-- #main -->
<footer id="footer">
footer stuff
</footer><!-- #footer -->
</div> <!-- #main-container -->
そして、これが最も重要な css です。
#main-container {
margin-top: 150px;
}
#header-container{
height: 150px;
top: 0;
position: fixed;
right: 0;
left: 0;
z-index: 1030;
}
ここで私のjsfiddle:http://jsfiddle.net/0xsven/RBnHt/
サイトを下にスクロールすると、#main-container のアンダーフロー (header-container の下) を非表示にする必要があります (逆のオーバーフロー:hidden のように)。
レイアウト側をあまり変更せずにそれを達成するにはどうすればよいですか?