Html 在另一个 div 上滚动 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16688545/
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
scroll div over another div
提问by Luc
I have two div with a height of 100%. And when you scroll, I want that the second div over the other scrolls, without scrolling the first up.
我有两个高度为 100% 的 div。当你滚动时，我希望第二个 div 在其他滚动上，而不是向上滚动第一个。
Like on this site: http://www.endzeit-ausstellung.de/
喜欢这个网站：http: //www.endzeit-ausstellung.de/
I looked in Firebug, but I can't find the solution there, can anybody help me?
我查看了 Firebug，但在那里找不到解决方案，有人可以帮助我吗？
Much thanks in advance!
非常感谢！
回答by paschka
you dont need jquery plugins to do this ?scrolling-effect“. you just need some css ;)
你不需要jquery插件来做到这一点？滚动效果“。你只需要一些 css ;)
quick and dirty example here:
快速和肮脏的例子在这里：
HTML
HTML
<div id="wrapper">
<div id="a" class="panels">FIXED PANEL</div>
<div id="b" class="panels">Scrolling-Panel 1</div>
<div id="c" class="panels">Scrolling-Panel 2</div>
<div id="d" class="panels">Scrolling-Panel 3</div>
</div>
CSS
CSS
// reset margin and padding of body and html
html,body {
padding:0;
margin:0;
background:black;
}
// allows us to scale all panels inside to full width and height
#wrapper {
position:absolute;
height:100%;
width:100%;
}
// make all panels fullpage
.panels {
position:relative;
height:100%;
min-height:100%;
width:100%;
z-index:1000;
}
// this is the fixed first panel
#a{
background:#eee;
position:fixed;
color:red;
top:0;
left:0;
/* prevents your fixed panel from being on top of your subsequent panels */
z-index: -99;
}
// the second panel -> after the first fixed panel
// should get 100% top margin, thats the trick
#b{
margin-top:100%;
background:yellow;
}
#c{
background:pink;
}
#d{
background:green;
}
demo here:
演示在这里：
btw: i've made the endzeit-ausstellung.de site.
顺便说一句：我制作了 endzeit-ausstellung.de 网站。
回答by Nitesh
This is called Parallaxeffect scrolling. This involves a lot of things to make it work. check out the resources for the same. The best one I foundwhich is much similar to the website reference that you have provided.
这称为Parallax效果滚动。这涉及到很多事情才能让它发挥作用。查看相同的资源。我发现的最好的一个，它与您提供的网站参考非常相似。
Hope this helps.
希望这可以帮助。
回答by EpokK
Check jParallax with jQuery : http://stephband.info/jparallax/
用 jQuery 检查 jParallax：http://stephband.info/jparallax/
回答by Dan
This is parallax scrolling, and there a lot of good libraries to help you out. I've used these before and they work well:
这是视差滚动，有很多很好的库可以帮助你。我以前使用过这些，它们运行良好：
Skrollr - https://github.com/Prinzhorn/skrollr
Skrollr - https://github.com/Prinzhorn/skrollr
Parallax.js - http://stolksdorf.github.io/Parallaxjs/
回答by oezguensi
There is a much simpler way. I found it on W3Schools. The important part is to add background-attachment: fixed. The full CSS looks like this:
有一个更简单的方法。我在W3Schools上找到了它。重要的部分是添加background-attachment: fixed. 完整的 CSS 如下所示：
.banner {
background-image: url("foo.jpg");
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
