Use position sticky - Githubissues

martgnz commented 10 months ago

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

jsonkao commented 10 months ago

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 commented 10 months ago

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

sveltejs / svelte-scroller

Use position sticky #20

before

top 0 and bottom 1

top 0.5 and bottom 1

after

top 0 and bottom 1

top 0.5 and bottom 1

top 0 and bottom 1 with full screen background