jquery - 如何使用 stellar.js(用于滚动的 jquery 插件)?

标签 jquery css jquery-plugins scroll parallax

我的正文中有三个 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/

相关文章:

css - 将 float div 垂直对齐到未知大小的 div

javascript - 如何使用 jQuery 在 div 中多次拖放图像以及在 dropped div 中拖放图像?

jquery - 默认图标级联自定义 Jquery UI Accordion 图标

jquery显示 float div

javascript - 如何使用一个 IF 语句验证多个函数 - Javascript、jQuery

javascript - 从外部域调用 WCF 服务

html - 使用css在页面顶部和底部放置图像

php - MySQL、JSON 和 Fullcalendar

javascript - 在鼠标悬停时隐藏/显示左侧边栏

javascript - 在 jQuery 插件中滚动位置自动播放的能力