1

I have built a page with a fixed header that always stays on top of the page. The page has a background picture and the header is transparent.

My basic layout:

<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 -->​

And this is the most important css:

#main-container {
    margin-top: 150px;
}    

#header-container{
    height: 150px;
    top: 0;
    position: fixed;
    right: 0;
    left: 0;
    z-index: 1030;
}

Here my jsfiddle: http://jsfiddle.net/0xsven/RBnHt/

When I scroll the site down I want the #main-container's underflow (below the header-container) to be hidden (somehow like a reversed overflow:hidden).

How do I accomplish that without changing too much on the layout side?

4

1 回答 1

2

问题是透明标题。

如果它是透明的，那么你会看到身体在里面滚动……

背景图像适用于整个文档，而不仅仅是标题。

你真的应该分割你的图像，一个 150px 的图像作为标题，一个没有前 150px 的图像作为其余部分。

看看这个：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;
}

小提琴也为标题和正文使用了相同的整个背景图像......只需将其分成两部分，你会没事的。

于 2012-10-22T12:17:03.063 回答