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 的样子。请注意导航栏下方的内容如何可见。

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

更新:

虽然并不理想，但我想出了一种有点黑客的方法来实现我想要的目标，涉及一些 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;
}