我的正文中有三个 div:
<body>
<div id="wrap">
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</div>
</body>
我只想知道“#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>
但是结果很糟糕。我永远无法滚动到整个页面的底部。
每次#b到达窗口顶部时,整个页面都运行到顶部(就像我第一次运行这个页面时看到的那样)
我想我还是不明白stellar.js网站上的介绍是什么意思。
请帮帮我。
最佳答案
编辑:为了展示您的示例应该如何工作,I've created a demo for you on JSFiddle .
目前,当需要指向滚动元素时,您正在使用 Stellar.js 来对抗“body”。对于大多数情况,这是“窗口”。此外,在文档准备好之前,您不能使用 Stellar.js。
因此,您应该将 JavaScript 更改为:
$(document).ready(function() {
$(window).stellar();
});
jQuery 有 $(document).ready 的简写,而 Stellar.js 有 $(window).stellar 的简写,所以你也可以这样写:
$(function() {
$.stellar();
});
希望这能为您解决问题。
关于jquery - 如何使用 stellar.js(用于滚动的 jquery 插件)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13397422/