0

実際のリボンの上下に透明なビットがある湾曲したリボン画像を使用した固定ナビゲーションバーがあり、フルサイズの背景をスケーリングしています (したがって、上部に一致する背景を持つナビゲーションバーを作成することはできません)。ユーザーがスクロールしているときに、ナビゲーションバーの途中で、ページのコンテンツがリボンの後ろに消えるようにしたいと思います。

これは、これら 2 つの質問と同じ問題であり、回答 (どちらも適切です) がうまくいきません。

ページをスクロールするときに、透明な固定位置 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 に答える