0

我体内有三个 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 网站上的介绍是什么意思。

请帮帮我。

4

1 回答 1

8

编辑：为了展示您的示例应该如何工作，我在 JSFiddle 上为您创建了一个演示。

目前，当需要将 Stellar.js 指向滚动元素时，您正在使用 Stellar.js 对抗“body”。在大多数情况下，这是“窗口”。此外，在文档准备好之前，您不能使用 Stellar.js。

因此，您应该将 JavaScript 更改为：

$(document).ready(function() {
    $(window).stellar();
});

jQuery 有一个 $(document).ready 的简写，而 Stellar.js 有一个 $(window).stellar 的简写，所以你也可以这样写：

$(function() {
    $.stellar();
});

希望这可以为您解决问题。

于 2012-11-16T00:00:01.793 回答