0

如果我希望背景和内容滚动到横幅 img 而不是导航上，我正在对带有背景的内容使用滚动效果。

我遇到的问题是正文背景没有随内容移动，在单独的 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 回答