Another Example using the document scroll event
data-document-scroll-action
With this demo, I am actually not so sure if I do it in such a way in an actual production (hence, the title of experiment). I would probably rather have the entire sticky element be one symbol and use a progress function. In this example file, there is a lot of whitespace just to have room to scroll to drive progress.
The following data attributes can be used to control the behavior of the scroll progress handler:
data-sticky-start: This attribute allows you to set a custom start position for the element's sticky behavior. If this attribute is not set, the element will become sticky when it reaches the top of the page.
data-sticky-end:
This attribute allows you to set a custom end position for the element's sticky behavior. If this attribute is not set, the element will remain sticky until the user scrolls to the bottom of the page.
data-sticky-bounding:
This attribute allows you to set a bounding box for the element's sticky behavior. If this attribute is set, the element will become sticky when it reaches the top of the bounding box, and will remain sticky until the user scrolls to the bottom of the bounding box.
There is a little progress handler action in the example as well (bonus):
data-progress-start:
The top position (in pixels) of the scrollable area.
data-progress-end:
The bottom position (in pixels) of the scrollable area.
data-progress-timeline:
The name of the timeline to be played (defaults to main timeline)
Example_Data_Attribute_Document_Scroll_Experiment.hype.zip (298,8 KB)
Effect was inspired by the page Apple Fitness+ - Apple and the images are from Unsplash