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

【问题标题】：Preventing content visibility underneath a transparent fixed navigation bar防止透明固定导航栏下方的内容可见性
【发布时间】：2014-03-18 01:57:08
【问题描述】：

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

我想让#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>');
}

我正在尝试做的一些模型

如果您向下滚动一点，这就是小提琴的外观。请注意导航栏下方的内容是如何可见的。

理想情况下，我希望对内容进行剪辑，使其在导航栏下方不可见。

更新：

虽然不理想，但我想出了一个有点老套的方法来实现我想要的，其中涉及一些 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() );  

});

【问题讨论】：

希望通过导航栏看到什么？
除了#content div 的内容之外的任何东西。
因为我希望用户能够看到导航栏下方的其他内容（尽管此示例中没有任何内容）。
@rectangletangle 您更新中的解决方案非常棒。但是，您可能希望将其作为答案提交，以便将问题标记为此类。

标签： javascript jquery html css

【解决方案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;
}

【讨论】：