Sticky Scroll Effect
This file works, but there is an alternative and modern approach on GitHub: https://github.com/worldoptimizer/HypeStickyScroll
This file bundle contains a horizontal and a vertical version of this scroll effect. It is ready to preview directly from Hype but needs to be later properly embed into a CMS or page. It's meant to be used as a page widget and not as a full web page. The JavaScript found in Head HTML is only there to add a frame before and after the Hype document and wrap the Hype document. The wrap can later be added manually in production as its pretty easy and only consists of a DIV hence <div>…your Hype document</div>.
Parameters:
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
The effect was originally inspired by a scroll driven video header found on Framer.com that has been since removed in a relaunch.
Download for free by entering zero. I'd appreciate if you return and re-download it for a fee if you're using it commercially, it's valuable to your work or it helped you make a profit.
Much appreciated.
MAKE SURE TO ALSO CHECK OUT THE NEW LIBRARY
Hype Sticky Scroll