Search code examples
javascriptjqueryajaxparallax

stellar.js not working with dynamically loaded elements via AJAX

I'm using the fantastic Stellar.js (http://markdalgleish.com/projects/stellar.js/) for parallax on a recent project, but I've run into a challenge:

Stellar isn't noticing when I change content via AJAX (in this case loading in new div's from an html file and using jQuery's replaceWith method). So, my new elements have no parallax, even though they have stellar data attributes.

I've tried calling the .stellar function on my window again after the AJAX is complete, but it doesn't do anything.

How can I get Stellar to correctly apply parallax to the new AJAX'd in elements?

Solution

  • I found that I can run this code in my jQuery AJAX callback and Stellar will then correctly apply parallax to my new AJAX'd in elements:

    $(window).data('plugin_stellar').destroy();
$(window).data('plugin_stellar').init();