如何使用stellar.js(jquery插件进行滚动)?

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网站上的介绍意味着什么.

请帮帮我.

mar*_*ish 8

编辑:为了展示你的例子应该如何工作,我在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)

希望这应该为你解决问题.