sveltejs
Use position sticky
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 https://github.com/sveltejs/svelte-scroller/issues/16.
before
top 0 and bottom 1
https://github.com/sveltejs/svelte-scroller/assets/1236790/16363fab-caf3-47d0-b911-af65a5788359
top 0.5 and bottom 1
https://github.com/sveltejs/svelte-scroller/assets/1236790/dcf030f3-da65-431d-99eb-d61fd75c7663
after
top 0 and bottom 1
https://github.com/sveltejs/svelte-scroller/assets/1236790/c06423f1-4778-4078-95fa-bf3dec13e343
top 0.5 and bottom 1
https://github.com/sveltejs/svelte-scroller/assets/1236790/0aa32e24-556d-4318-81ff-3730e4fa8344
top 0 and bottom 1 with full screen background
https://github.com/sveltejs/svelte-scroller/assets/1236790/e9148bb4-6615-46a0-8c69-cfc68318062b
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.
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