单个元素中的stellar.js

Question

I'm using stellar.js, and i'm with a problem that i dont know if am i using it wrong, or if the plugin isnt working properly...

I have an html element

<section id="dbr" data-stellar-background-ratio="1.5" rel="dbr">

when i call the stellar plugin like this:

$.stellar({responsive: true});

It works just fine! but its not working when i try it like this:

$('#dbr').stellar();

Am i doing something wrong? thanks!

Answer 1

When initialising Stellar.js, you point it at the element that's scrolling (eg $(window).stellar() , or $.stellar() for short)

The reason the first line is working and not the second one is that you're pointing Stellar.js at different elements, when it looks like you need to always point it at window . Your second example would work if it was either $(window).stellar() , or simply $.stellar() .

For Stellar.js to work correctly, it needs to know which element is scrolling so it can keep an eye on the scroll events. When initialised, it will automatically search for all parallax elements or backgrounds nested inside. So, even if you only have one element, you need to call .stellar() against window .

Hope that helps :)