在透明页眉后面隐藏页面内容

Question

我有一个固定的导航栏，使用的是具有透明位的实际功能区上方和下方的弯曲功能区图像，并且具有缩放全尺寸背景（所以我无法制作具有匹配背景的导航栏顶端）。我希望页面内容在用户滚动时在导航栏中途消失。

这是同样的问题，这两个问题和答案（这是很好）不适合我。

Hide scrollable content behind transparent fixed position divs when scrolling the page?

Hide Scrolling Content Under Transparent Header

这是我不想要的东西：

http://imageshack.us/photo/my-images/213/badnr.jpg/

这是那种我想要的东西，但没有滚动条：

http://imageshack.us/photo/my-images/534/scrolled.jpg/

在此先感谢您的帮助，非常感谢，本网站已经并将继续教我很多。

Answer 1

css z-index属性应该能够把任何元素放在另一个元素的前面或后面。像这样：

<style type="text/css"> 
body, html { 
margin:0 auto; 
padding:0; 
font-family:Verdana, Geneva, sans-serif; 
font-size:12px; 
} 
/* Header Styling */ 
#header { 
color:#FFF; 
background: url(/images/header-back.png) repeat-x; 
position:fixed; 
top:0; 
left:0; 
width:100%; 
height:50px; 
z-index:1; 
    } 

#headerWrap { 
width:1024px; 
margin:0 auto; 
height:50px; 
} 
/* Sub Header */ 
#subHeader { 
position:fixed; 
top:50px; 
margin:0 auto; 
z-index:1; 
} 
#subHeaderWrap { 
height:30px; 
width:830px; 
border-bottom:thin solid #333; 
background: url(../images/subheader.png) repeat-x; 
    } 
    /* Contaier */ 
    #container { 
margin:0 auto; 
width:1024px; 
min-height:600px; 
    } 
    #containerWrap { 
margin-top:50px; 

    } 

    /* Menu */ 
    #sidebar { 
float:left; 
width:140px; 
min-height:600px; 
    } 
    #content { 
border-left:#333333 solid thin; 
border-right:#333333 solid thin; 
border-bottom:#333333 solid thin; 
float:left; 
width:830px; 
min-height:600px; 
padding-top:30px; 
margin-bottom:10px; 
    } 
#contentWrap { 
width:830px; 
margin:0 auto; 
padding-bottom:10px; 
} 
</style> 
<div id="container"> 
<div id="header" style="z-index:1;"/* Places div on top */"> 
This is transparent. 
</div> 

<div id="containerWrap"> 
    <div id="sidebar"> 
Menu Items Here 
    </div> 

<div id="content"> 
    <div id="contentWrap"> 

<div id="subHeader" style="z-index:1;"/* Places div on top */"> 
<div id="subHeaderWrap"> 
This div is transparent too, but is now on top. 
</div> 
</div> 

Anything here is scrollable and will scroll under the divs above with z-index:1; 


    </div> 
</div> 

Answer 2

我找到了您要找的解决方案。

你打算使用一个小Jquery和一些CSS。我会假设你在你的页脚中加载了最新版本的Jquery。

标题将被固定，其中的元素将是绝对的。我们不会关注标题内的元素，因为这对于这一点并不重要，但是如果您要在标题中放置菜单和徽标，则可以使其成为绝对的。

分配了类标题的HTML Div或者如果您愿意，您可以创建一个<header></header>元素，无论哪一个。但对于这个例子，我们将使用一个类。

<div class="header">...Your Header Elements In this...</div> 

CSS

body {background: url('../img/page-background.jpg') no-repeat top center fixed; background-size: cover;} 
.header {position: fixed; top: 0; left: 0; width: 100%; height: 100px; background: transparent;} 

JS - 我用一个单独的JS文件，然后我在页脚加载Jquery的后加载此。

$(window).scroll(function() { 
"use strict"; 
var windowYmax = 1; 
var scrolledY = $(window).scrollTop(); 
    if (scrolledY > windowYmax) { 
    $('.header').addClass("hide-content"); 
    } else { 
    $('.header').removeClass("hide-content"); 
    } 
}); 

添加这个CSS分配新类：

.hide-content {background: transparent url('../img/page-background.jpg') no-repeat top center fixed; background-size: cover;} 

这里是一个的jsfiddle：The Fiddle 我是不是能够得到JS中的jsfiddle工作由于某种原因，也许有人可以修复问题，但我没有太多时间来混淆JSfiddle，但想提供一个最终结果的例子。所以我只是将JS获得的类添加到HTML中的div中，并且可以在预览窗格中看到结果。