Inspired by the https://framer.com page. It should be used as a widget on a page built with regular HTML, Blog or CMS. It tries to take care of margins and fixed position etc.
This started in the Beta-Forum so now I converted it to Hype 3 and added a bunch of settings. This could also be optimized with external code and intersection observer and the CSS sticky position. But these would both require a polyfill and in this way I also used it to experiment with vanilla JS. Currently only usable with full height containers. Still untested with WordPress upload or real HTML wrapper. So still work in Progress.
fixed iOS and resize bugs, added hideIfOffScreen
added hideUsingDisplayNone, added onScreenState callback
added native position:sticky support if the browser supports it
Parameters in document:
scrollDistanceHeight sets your scroll height (distance you want the user to scroll)
scrollProgressOffset sets the offset that triggers progress
renderScrollProgressToBody sets classes (about Sticky-Status) and progress on body for external CSS rules
onScrollProgress callback that receives 0-1 as progress parameter so you can act on it (playhead etc.).
hideIfOffScreen setting to hide the container if off screen (still not sure if display:none or visibility:hidden is better for this). Currently using visibility (but display none is commented in code to try).
hideUsingDisplayNone setting that uses display:none over visibility:hidden (default), only applies if hideIfOffScreen is true
onScreenState callback that receives a number from -2 to 2 indicating the state including before/after, onScreen/offScreen and stuck