1

常にページの一番上に固定ヘッダーがあるページを作成しました。ページには背景画像があり、ヘッダーは透明です。

私の基本的なレイアウト：

<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 のように)。

レイアウト側をあまり変更せずにそれを達成するにはどうすればよいですか?

4

1 に答える 1

2

問題は透過ヘッダーです。

透明な場合は、その中をスクロールする本文が表示されます...

背景画像は、ヘッダーだけでなくドキュメント全体を対象としています。

ヘッダー用の 150 ピクセルの画像と、残りの部分用の最初の 150 ピクセルのない画像を使用して、実際に画像を分割する必要があります。

これを見てください：http://jsfiddle.net/tTjVe/1/

#header-container{
    ...
    ...
    background: url("http://www.webdesign.org/img_articles/20024/110.jpg") no-repeat top center fixed;
    background-size: 100% 150px;
}

フィドルは、ヘッダーと本文にも同じ背景画像全体を使用しています... 2つに分割するだけで問題ありません。

于 2012-10-22T12:17:03.063 に答える