将页面内容隐藏在透明标题后面答案

【问题标题】：Hide page content behind transparent header将页面内容隐藏在透明标题后面
【发布时间】：2012-06-22 07:20:15
【问题描述】：

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

这两个问题是同一个问题，答案（很好）对我不起作用。

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/

提前感谢您的帮助，非常感谢，这个网站已经并将继续教会我很多东西。

【问题讨论】：

标签： css navigation scroll

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

【讨论】：

【解决方案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 中，您可以在预览窗格中看到结果。

【讨论】：