Scroll sticky text

This example shows how we can have an element which comes into view and sticks there, changing content synchronised with text that scrolls above it. This is achieved by:

1. Have a defined area on the page which contains our text and synced content area.
2. Make the synced content area sticky, this will ensure:
   1. It will stick to the bottom being displayed even after other content has scrolled
   2. But when the entire section is scrolling out of view, it wil scroll with it.
   Overall this means we don't need to tie our scroll trigger behaviour to the document scroll, so even if we move the scroll sync section around later, it will still work.
3. Use Intersection Observer to detect when text scrolls into and out of our content area. Use the rootMargin property on Intersection Observer to trigger intersection only when text scrolls above our synced content area.
4. When text is visible, change what is displayed in our synced content area.

See below: