javascriptscrollparallaxscrollerjavascript-databinding

Updating skrollr dynamically


I'm looking for a way update the absolute position values of skrollr dynamically. Relative positioning is out of the question as the body tag is the parent element and extends the entire length of the page. The object in question is of fixed position inside the body tag.

1) Is there a way to dynamically update the absolute values on an element without needing to re-instantiate the entire plugin? For instance changing "data-8000-start" to "data-9000-start". Using jQuery to update these seems a bit inadequate.

2) Using constants seemed to almost get me there, but as noted, requires that I re-instantiate the plugin. Is there a way to pass a constant like this into the refresh method instead?


Solution

  • Let me start by saying thanks to @Prinzhorn for this amazing tool. It really is a nice piece and has been a huge asset. I've built custom solutions for this kind of thing before, but this really adds an element of ease to it.

    It doesn't appear there is a supported method for dynamically updating data attributes with Skrollr right now though. But as noted in a comment above there is a request for it. However I managed to hack something together that is fairly inefficient. I only performed this action on resize so it was used as minimally as possible.

    1. I used JS to remove all attributes from the element. This seems terribly inneficeint, but any attempts I made to just have it remove the data attributes didn't work very well at all.
    2. I added the necessary attributes back on that were removed. Then changed my dynamic values and applied new data attributes.
    3. Finally, I made a refresh call to Skrollr and only applied it to the element that I had updated. This helped to ensure that only the necessary parts were being updated.