起初我认为这将是一个简单的修复，然后我开始失去脑细胞。
我提供的是CODEPEN HERE
基本上，我在页面顶部有两个元素，它们必须保持固定，而页面底部（内容）自然滚动，没有 重置固定元素 < / strong>即可。
有什么想法吗？
HTML
<body >
<div class="wrapper">
<div class="container">
<div class="sidebarmenu">
<ul class="sidebarmenu1">
<li><a href="index.html">Home</a></li>
<li><a href="1.html">Info</a></li>
<li><a href="11.php">Contact Us</a></li>
<li><a href="2.php">Page 2</a></li>
<li><a href="3.php">Page 3</a></li>
<li><a href="4.php">Page 4</a></li>
<li><a href="5.php">Page 5</a></li>
<li><a href="6.php">Page 6</a></li>
</ul>
</div>
<div class="banner" >
<img style="" alt="logo text" src="http://www.garethjmsaunders.co.uk/blueprint/placeholders/gif/grid/span-11-rows-15.gif" />
</div>
<div class="spacer"></div>
</div>
</div>
<div class="mainContent" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. <br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.
</div>
</body>
CSS
body {background-color: black; width: 980px; margin: 0px auto;}
.wrapper {width: 100%; } /*this shows the element fixed positioning is working */
.container {width:100%; margin:0 auto; padding: 0px 15px; background-color: black; overflow:hidden}
.banner {margin: 15px 0px 0px 500px; position:fixed; }
.spacer{background-color:black; height:290px;}
.mainContent { color:white; z-index:-1; margin-top:20px; width: 980px; overflow:hidden}
/* sidebar */
.sidebarmenu {float: left; background-color:Black; position:fixed; margin: 15px; }
.sidebarmenu ul{margin: 0;padding: 0;list-style-type: none;font: bold 13px Verdana;width: 180px; border-bottom: 1px solid #ccc;}
.sidebarmenu ul li a{display: block;overflow: auto;color: black;text-decoration: none;padding: 6px;border-bottom: 1px solid #778;border-right: 1px solid #778;}
.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{ background-color: #c0c0c0;}
.sidebarmenu ul li a:visited{color: white;}
.sidebarmenu ul li a:hover{background-color: black;color:red;}
答案 0 :(得分：1)
在两个元素后面放一个大的黑色固定盒子。
答案 1 :(得分：1)
解决这个问题的技巧是，不是单独声明侧边栏和横幅的固定位置，而是将它们分组在一个公共父元素下，其位置设置为固定。然后，您可以为父元素提供背景颜色，以允许它掩盖其下的任何内容。
请参阅移植到JSFiddle的修订示例：http://jsfiddle.net/88Sf9/1/
修订后的CSS规则如下：
.wrapper {
width: 100%;
position: fixed;
}
.container {
width:100%;
margin:0 auto;
padding: 0px 15px;
background-color: black;
overflow:hidden;
}
.mainContent {
color: white;
padding-top: 290px;
width: 980px;
}
一些注意事项：
.mainContent overflow: hidden;声明我还在主容器上应用了一个顶部填充，以便当您沿y轴的滚动位置为0时（即，当您处于此位置时）内容将从视口顶部的固定元素填充页面顶部）。
但是，如果您正在处理具有动态背景的容器，则解决方案将无效。图像或渐变。对于这种情况，您可能希望使用CSS掩码，因为缺少跨浏览器支持和标准化。
答案 2 :(得分：0)
只需添加：
.mainContent {
background-color: #000;
position: relative;
z-index: 10;
}