滚动页面时隐藏透明固定位置div后面的可滚动内容？

Question

我有一个名为header的div,它设置有固定位置.问题是当我滚动页面时,页面内容显示在标题后面(标题是透明的).

我对css了解很多,但似乎无法想出这个.我试过设置溢出到隐藏,但我知道它不会工作(它没有).

这很难解释,所以我尽我所能.

HTML:

<div id="header">
    <div id="topmenu">Home | Find Feeds | Subscriptions</div>
</div>
<div id="container">
    <div id="content">
        testing
    </div>
</div>

CSS:

#header {
    margin:0 auto;
    position: fixed;
    width:100%;
    z-index:1000;
}
#topmenu {
    background-color:#0000FF;
    height:24px;
    filter: alpha(opacity=50);
    opacity: 0.5;
}

#leftlinks {
    padding: 4px;
    padding-left: 10px;
    float: left;
}

#rightlinks {
    padding: 4px;
    padding-right: 10px;
    float: right;
}

#containerfixedtop {
    width: 100%;
    height: 20px;
}

#contentfixedtop {
    margin: 0 auto;
    background-color: #DAA520;
    width: 960px;
    height:20px;
}

#container {
    position: relative;
    top: 68px;
    width: 100%;
    height: 2000px;
    overflow: auto;
}

#content {
    margin: 0 auto;
    background-color: #DAA520;
    width: 960px;
    height: 2000px;
}

这是问题的截图:

Answer 1

刚刚来到这个晚了,但是如果将来遇到其他人,这是你的修复.

你的CSS代码:

.wrapper {
    width:100%;
    position:fixed;
    z-index:10;
    background:inherit;
}

.bottom-wrapper {
    width:100%;
    padding-top:92px;
    z-index:5;
    overflow:auto;
}

你的HTML:

<div class="wrapper">
    ...your header here...
</div>
<div class="bottom-wrapper">
    ...your main content here...
</div>

这将为您提供一个与您的站点完全匹配的标题,并浮动在顶部.主要内容将自动滚动标题,并在通过标题时消失.你的.bottom-wrapper padding-top应该是你的标题包装器内容的高度.

干杯!

Answer 2

你可能正在寻找z-index.它允许您指定页面上元素的垂直顺序,因此元素具有z-index: 10浮动(可视)元素z-index: 5.

提供内容z-index: 5并查看其是否有效.

Answer 3

我遇到了类似的问题,并为我的案例找到了解决方案.无论您使用的是全屏背景图像还是纯色(包括白色),都应该适用.

HTML

<div id="full-size-background"></div>
 <div id="header">
  <p>Some text that should be fixed to the top</p>
</div>
<div id="body-text">
  <p>Some text that should be scrollable</p>
</div>

CSS

#full-size-background {
z-index:-1;
background-image:url(image.jpg);
background-position:fixed;
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
}
#header {
position:fixed;
background-image:url(image.jpg);
height:150px;
width:100%;
}
#body-text {
margin-top:150px;
}

这给了我一个带有透明固定标题的整页图像的外观,当主体内容滚动时,它隐藏在标题后面.图像看起来无缝.

你可以用纯色背景做同样的事情,但可以说,它会更容易.

2注意事项:标题有一个设定的高度,我只在FF和Chrome中测试过.