0

背景とコンテンツをナビゲーションではなくバナー画像上でスクロールさせたい場合は、背景のあるコンテンツにスクロール効果を使用しています。

私が抱えている問題は、本文の背景がコンテンツとともに移動しないことです。別のdivに背景を作成する際の問題は、ページが全画面の高さでない場合、フッターの下に空白の背景が残ることです。

これがフィドルですhttp://jsfiddle.net/ThAv5/

HTML

<body>
<div id="navBar"></div> 
<div id="headerBar"></div>
<div id="mainContent"><h1>This is the main content, the yellow background is not scrolling with the text</h1></div>

CSS

#navBar{
position:fixed;
top: 0;
left:0;
width: 100%;
z-index:1000;
-moz-box-shadow: 0 0 5px #000000;
-webkit-box-shadow: 0 0 5px #000000;
box-shadow: 0 0 5px #000000;
    background:red;
    height:50px;
}

 #headerBar{
top: 0;
height: 250px;
left: 0;
right: 0;
margin:0px auto;
width:100%;
position: fixed;
z-index:-1000;
    background:blue;
 }

  #mainContent{
overflow: auto;
z-index: 0;
margin-top: 250px;
    width:100%;
     height:900px;
  }

  body{
     background:yellow;
    }

よろしくお願いしますジョージ

4

1 に答える 1

1

私が何かを見逃していない限り、あなたはただ変更する必要がありposition to relativeます#headerBar

http://jsfiddle.net/ThAv5/2/

#headerBar{
    top: 0;
    height: 250px;
    left: 0;
    right: 0;
    margin:0px auto;
    width:100%;
    position: relative;
    z-index:-1000;
    background:blue;
}
于 2013-03-20T18:00:47.493 に答える