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

隐藏透明标题后面的页面内容

2 个答案: