我有一个固定的导航栏使用具有透明位上方和实际色带下方弯曲带的图像和我有一个缩放全尺寸背景（所以无法使与在顶部的匹配背景导航栏）。 我想在网页内容消失带条背后，中途导航栏为用户滚动。
这是同样的问题，这两个问题和答案（这是好的）不是为我工作。
滚动页面时躲在透明固定位置的div滚动内容？
隐藏滚动显示的内容在透明头
这是我不想要的东西：
http://imageshack.us/photo/my-images/213/badnr.jpg/
这是那种我想要的东西，但没有滚动条：
http://imageshack.us/photo/my-images/534/scrolled.jpg/
在此先感谢您的帮助，它极大的赞赏，这个网站已经并将继续教我很多东西。
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>
我发现你正在寻找的解决方案。
你会用一个小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： 小提琴我是不是能够得到JS中的jsfiddle工作，出于某种原因，也许有人可以解决这个问题，但我真的没有时间去用的jsfiddle乱得多，但要提供例子的最终结果。 所以，我只是补充说，得到由JS在HTML分配到div类，你可以看到结果在预览窗格中。
