Render sticky elements on document.readyState === 'interactive'

[dkoo]

Hi @rgalus ,

I am using this library for a production site (thank you for the library—it's great!) and ran into an issue that stems from that site's heavy use of DFP ads. I understand why the library waits for document.readyState === 'complete' before rendering the sticky elements—to ensure that all cached element positions are accurate as asynchronously rendering elements (images in particular) may affect the height of the page—but it also results in long delays before the stickiness kicks in when certain assets (cough ads) take a long time to execute. This is of course a problem with the site itself rather than the library, but I think the library's handling of this imperfect situation could be improved.

The solution that we tested and which is working for us is to fire the initial render on document.readyState === 'interactive', which triggers the stickiness on relevant elements as soon as the user can scroll/interact with the page, even if certain assets delay the page load. Then, when the document completes, trigger an update() to recalculate positions in order to account for possible changes in document height.

Please let me know if you have any questions about this.

[dkoo]

@rgalus Added another enhancement to the update() method, which re-fetches the elements based on the selector. This is so that on pages where sticky elements are added to the DOM over time (such as on infinite scrolling pages), running update() will apply sticky to any elements that match the selector but were created after the initial invocation.