0

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

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

滚动页面时隐藏透明固定位置div后面的可滚动内容？

隐藏透明标题下的滚动内容

这是我不想要的：

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

这是我想要的，但没有滚动条：

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

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

4

2 回答 2

0

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>
于 2012-08-11T06:02:05.303 回答
0

我找到了您正在寻找的解决方案。

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

于 2017-03-23T06:08:16.297 回答