CODEWITHSUNDEEP
jquerycssjquery-pluginsscrollparallax
kikkpunk
kikkpunk

Reputation: 1337

How to use stellar.js ( jquery plugin for scrolling )?

i have three div in the body:

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

All i want to realize is that the "#b" scrolls faster than the other two. That's it.

So i write code like (then revise it according to Mark's suggestion):

<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>

But the result is terrible. I can never scroll to the bottom of the entire page.

Every time the #b reaches to the top of the window, the entire page runs to the top(just like what i see when first running this page)

I think i still don't understand what the introduction on stellar.js site means.

Please help me out.

Upvotes: 0

Views: 14755

Answers (1)

markdalgleish
markdalgleish

Reputation: 666

EDIT: To show how your example is supposed to work, I've created a demo for you on JSFiddle.

Currently, you're using Stellar.js against 'body', when it needs to be pointed at the scrolling element. For most cases, this is 'window'. Also, you can't use Stellar.js until after the document is ready.

So, you should change your JavaScript to:

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

jQuery has a shorthand for $(document).ready, and Stellar.js has a shorthand for $(window).stellar, so you could also write it like this:

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

Hopefully this should clear things up for you.

Upvotes: 8

Related Questions