javascript 如何使网页的一部分不与页面的其余部分一起滚动？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20463225/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make part of the webpage not scroll with the rest of the page?
提问by AggieDev
I am very new to web design, and am going to make a simple webpage. I like the idea of this webpage:
我对网页设计很陌生，我将制作一个简单的网页。我喜欢这个网页的想法：
Where the top part doesn't scroll with the rest of the page, giving a neat scrolling effect, as well as where the very top of the scrollable part is just at the bottom of the web page (as in with one "click" of the mouse scroll wheel, you'll immediately begin to see the scrolling part). How is something such as this made possible?
顶部不与页面其余部分一起滚动的地方，提供整洁的滚动效果，以及可滚动部分的最顶部位于网页底部的位置（如“单击”鼠标滚轮，您将立即开始看到滚动部分）。这样的事情是如何成为可能的？
回答by Kinjan Koradiya
just give position:fixed; and z-index:1 to the top part which you want to back on scroll and in wrapper give position:relative; z-index:2;
只给位置：固定；和 z-index:1 到要返回滚动和包装器的顶部的位置：相对；z-索引：2；
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style>
.fix-div{position:fixed; height:100%; width:100%; left:0; top:0; z-index:1;}
#wrapper{position:relative; z-index:2; margin:100% 0 0;}
</style>
</head>
<body>
<div class="fix-div">
Fix div content goes here...
</div>
<div id="wrapper">
Your content goes here...
</div>
</body>
</html>
回答by Imesh Chandrasiri
Fiddle :link
小提琴：链接
Code :
代码 ：
CSS :
CSS :
.main{
background-color:green;
width:100%;
height:100px;
padding:0px;
margin:0px;
z-index:1;
position:fixed;
top:0px;
}
.content{
height:1000px;
width:100%;
margin-top:100px;
z-index:10;
background-color:red;
position:relative;
}
HTML :
HTML :
<div class='main'></div>
<div class='content'></div>
回答by Bharadwaj
For the parts which you don't want to scroll set css as position : absolute; top:0;left:0;
对于不想滚动的部分，将 css 设置为 position : absolute; 顶部：0；左侧：0；
