Use position sticky

[martgnz]

Swaps the current fixed/absolute swap with position sticky. This is more efficient because we only update the offset once (except on parallax mode).

Moving the offset calculation outside of the intersection observer also has the benefit of positioning the background div on load rather than after the first scroll.

There's one breaking change though. In the current code when you reach progress 1 the background div will go off the screen. In my experience this is confusing and position sticky approach where the background div stays fixed until you finish scrolling over the container is what most people actually want. Also, most scrollys i've seen tend to run a full height div on the background, where this point is moot. Thoughts welcome, of course!

Closes #16.

before

top 0 and bottom 1

Grabacion.de.pantalla.2023-12-03.a.las.18.12.14.mov

top 0.5 and bottom 1

Grabacion.de.pantalla.2023-12-03.a.las.18.19.59.mov

---

after

top 0 and bottom 1

Grabacion.de.pantalla.2023-12-03.a.las.18.22.39.mov

top 0.5 and bottom 1

Grabacion.de.pantalla.2023-12-03.a.las.18.21.53.mov

top 0 and bottom 1 with full screen background

Grabacion.de.pantalla.2023-12-03.a.las.18.23.14.mov

[jsonkao]

Thank you @martgnz ! I've been waiting for svelte-scroller to use position: sticky for a while. I always had to manually change. You're doing the Lord's work, Martin. Never met you but we should grab a drink at the pube some time.

[jsonkao]

Hi MGG, I made a Stepper to use at ProPublica, an investigative journalism non-profit, that uses position sticky and removes scroll listeners. Please have a look and sponsor it if you like: https://github.com/jsonkao/svelte-scrollama