阻止透明固定导航栏下方的内容可见性

Question

我有一个半透明的导航栏，窗口顶部有一个固定的位置，下面有内容。

我想这样做，以便导航栏下方#content 永远可见。当用户位于页面顶部时，将内容的上边距设置为与导航栏相同的高度。但是，当用户向下滚动时，内容将在导航栏下方显示。

基本上我试图推送/剪辑内容div的顶部，因此导航栏下方没有任何内容可见。

导航栏的透明度非常重要，因此只需使用不透明的灰色背景就无法满足我的需求。

有关完成我尝试做的事情的任何建议吗？

代码：

http://jsfiddle.net/NAMka/

HTML：

<nav id="top">
    <div style="margin: 12px;">foo</div>
</nav>

<div id="content"></div>

CSS：

#top {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    color: white;
    background: rgba(0, 0, 0, 0.7);
}

#content {
    margin-top: 60px;
}

JS：

// This is a little cleaner than just manually repeating the p tags.
for (var i = 0; i <= 20; i++) {
    $('#content').append('<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis dolor in sem tempus rutrum. Nullam mattis sodales mi, eu bibendum ante porta quis. Phasellus dui sem, imperdiet at massa in, imperdiet vestibulum leo.</p>');
}

我试图做的一些模拟

如果你向下滚动一下，这就是小提琴的样子。请注意导航栏下方的内容是如何显示的。

理想情况下，我希望剪切内容，因此导航栏下方无法显示。

更新

虽然不理想，但我想出了一种有点hackish的方式来实现我想要的一些JS和overflow:hidden CSS设置。它似乎对我的目的很有效。

http://jsfiddle.net/NAMka/4/

HTML：

<nav id="top">
    <div style="margin: 12px;">foo</div>
</nav>

<div id="container">
    <div id="veil">
        <div id="content"></div>
    </div>
</div>

CSS：

#top {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    color: white;
    background: rgba(0, 0, 0, 0.7);
}

#container {
    background: yellow;    
    margin-top: 60px;
    z-index: -1;
    position: relative;
}

#veil {
    background: red;
    position: absolute;
    width: 100%;
    left: 0px;
    bottom: 0px;
    overflow: hidden;    
}

#content {
    background: blue;
    position: absolute;
    left: 0px;
    bottom: 0px;    
}

JS：

for (var i = 0; i <= 6; i++) {
    $('#content').append('<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis dolor in sem tempus rutrum. Nullam mattis sodales mi, eu bibendum ante porta quis. Phasellus dui sem, imperdiet at massa in, imperdiet vestibulum leo.</p>');
}

var height = $('#content').height();
$('#container').height(height);
$('#veil').height(height);

$(window).scroll(function() {    

    $('#veil').height($('#content').height() - $(window).scrollTop() );  

});

Answer 1

您可以添加位于导航栏下方但位于内容上方的白色div。

http://jsfiddle.net/naLz7/

HTML

<nav id="top">
    <div style="margin: 12px;">foo</div>
</nav>
<div id="bottom"></div>
<div id="content"></div>

CSS

#top {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    color: white;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1;
}

#bottom {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: #fff;
    z-index: 0;
}

#content {
    margin-top: 60px;
}