One
Two
Three
This method will be smoother than using Interactions 2.0/1.0 and leverages native CSS functionality.
Hero
NOTHING HERE
Section - Red = 100vh
Section - Pink = 100vh
Section - Orange = 100vh
Section - Blue = 100vh
Bottom; Relative
Sticky = 100vh
Container; Absolute
Vertical Align = 100vh
Sticky = 100vh
Sticky = 100vh
Middle; Absolute
Sticky = 100vh
The trick is to understand that the bottom layer is set to "relative" and controls the length of the scrolling by making the page longer and longer. The middle layer is set to "absolute" and rides on top of the bottom layer.
