kik*_*unk 0 css jquery scroll jquery-plugins parallax
我体内有三个div:
<body>
<div id="wrap">
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</div>
</body>
Run Code Online (Sandbox Code Playgroud)
我想要意识到的是,"#b"比其他两个滚动得更快.而已.
所以我写代码(然后根据Mark的建议修改它):
<script>
$(document).ready(function(){
$(window).stellar();
});
</script>
<style>
#wrap{overflow:hidden;}
</style>
...
<body>
<div id="wrap">
<div id="a" data-stellar-ratio="1"></div>
<div id="b" data-stellar-ratio="2"></div>
<div id="c" data-stellar-ratio="1"></div>
</div>
</body>
Run Code Online (Sandbox Code Playgroud)
但结果很可怕.我永远无法滚动到整个页面的底部.
每次#b到达窗口顶部时,整个页面都会运行到顶部(就像我第一次运行此页面时所看到的那样)
我想我仍然不明白stellar.js网站上的介绍意味着什么.
请帮帮我.
编辑:为了展示你的例子应该如何工作,我在JSFiddle上为你创建了一个演示.
目前,当你需要指向滚动元素时,你正在使用Stellar.js来对抗'body'.在大多数情况下,这是"窗口".此外,在文档准备好之前,您不能使用Stellar.js.
因此,您应该将JavaScript更改为:
$(document).ready(function() {
$(window).stellar();
});
Run Code Online (Sandbox Code Playgroud)
jQuery有$(document).ready的简写,Stellar.js有$(window).stellar的简写,所以你也可以像这样写:
$(function() {
$.stellar();
});
Run Code Online (Sandbox Code Playgroud)
希望这应该为你解决问题.