防止透明固定导航栏下的内容可见性 [英] Preventing content visibility underneath a transparent fixed navigation bar

问题描述

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

我想要以使 #content 不会过在导航栏下方显示。当用户位于页面顶部时，将内容的上边距设置为与导航栏相同的高度。但是，当用户向下滚动时，内容会在导航栏下方显示。

基本上我正在推/剪辑内容div的顶部，

导航栏的透明度特别重要，因此只需要一个不透明的灰色背景就不能满足我的需要。 / p>

有关完成我要做什么的任何建议吗？

代码：

HTML：

 < nav id =top> 
< div style =margin：12px;> foo< / div> 
< / nav> 
 
< div id =container> 
< div id =veil> 
< div id =content>< / div> 
< / div> 
< / div> 
  

CSS：

 code> #top {
 position：fixed; 
 top：0; 
 left：0; 
 width：100％; 
 height：60px; 
颜色：白色
 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 rut​​rum.Nullam mattis sodales mi，eu bibendum ante porta quis。Phasellus dui sem，imperdiet at massa in，imperdiet vestibulum leo。 
} 
 
 var height = $（'＃content'）。height（）; 
 $（'＃container'）。height（height）; 
 $（'＃veil'）。height（height）; 
 
 $（window）.scroll（function（）{
 
 $（'＃veil'）。height（$（'＃content'）。height （window）.scrollTop（））; 
 
}）; 
  

解决方案

您可以添加一个位于navbar下方的白色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; 
颜色：白色
 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; 
} 
  

I have a semi-transparent navigation bar that has a fixed position at the top of the window, and content underneath it.

I'd like to make it so that the #content isn't ever visible underneath the navigation bar. Setting the top margin of the content to the same height as the navigation bar works, when the user is at the top of the page. However when the user scrolls down, the content becomes visible underneath the navigation bar.

Basically I'm trying to push/clip the top of the content div, so none of its content is ever visible underneath the navigation bar.

The navigation bar's transparency is particularly important, so simply having an opaque gray background won't work for what I need.

Any suggestions for accomplishing what I'm trying to do?

Code:

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

Some mock-ups of what I'm trying to do

This is what the fiddle will look like if you scroll down a little bit. Notice how the content is visible underneath the navigation bar.

Ideally, I'd like the content to be clipped, so it isn't visible underneath the navigation bar.

Update:

Although not ideal, I figured out a somewhat hackish way to achieve what I want involving some JS and the overflow:hidden CSS setting. It seems to work well enough for my purposes.

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() );  

});

解决方案

You can add a white div that sits beneath the navbar but above the content.

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

这篇关于防止透明固定导航栏下的内容可见性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！