Question

我体内有三个div：

<body>
  <div id="wrap">
    <div id="a"></div>
    <div id="b"></div>
    <div id="c"></div>
  </div>
</body>

我想要意识到的是，“＃b”比其他两个滚动得更快。就是这样。

所以我写代码（然后根据马克的建议修改它）：

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

请帮帮我。

Answer 1

编辑：要展示您的示例应如何运作，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();
});

希望这能为你解决问题。

如何使用stellar.js（jquery插件进行滚动）？

1 个答案: