javascript - 防止透明固定导航栏下的内容可见

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>');
}

我正在尝试做的一些模型

如果向下滚动一点， fiddle 会是这样的。请注意导航栏下方的内容是如何显示的。

理想情况下，我希望内容被剪裁，因此它在导航栏下方不可见。

更新:

虽然不理想，但我想出了一个有点 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;
}