breadadams / scroller-motion

🛹 Elegant motion scrolling for React

Home Page:https://scroller-motion.js.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Pinning or sticky child elements?

wilr opened this issue · comments

Probably more related to framer-motion rather than this but Is there a way to modify the motion value with respect to the clientBoundingBox of a div in order to replicate a sticky elements while an item is in the viewport?

useScrollerMotion returns the overall value which can be used to implement a 'fixed' position (i.e it always stays X from the top) by doing a counter-scroll. but I haven't been able to get a smooth transition for something which scrolls up and into position then stays sticky within a container 20px from the top.

Any help or pointers would be great!

Hey @wilr, does this thread help at all? #4 (comment)

Otherwise, if you could provide a code sample (on something like codesandbox, stackblitz, etc.) I'll take a look asap.

Thanks

Feel free to reach out if the above doesn't resolve this @wilr, closing for now.

@breadadams what if I have a fixed element that I want to place behind a div that's inside the smooth scroll container?
The transform of the scrollerMotion breaks the z-index of the fixed element