Problem with smooth-scrolling - with a sticky div that triggers a model
Closed this issue · 4 comments
Hello,
Thank you for your awesome project that I just discovered. Over the past couple hours, I tried to integrate some motion effects into my WordPress - oxygen builder website and so far it's working pretty well.
The only thing that's a bit challenging for me is integration smooth-scrolling without breaking my page. My page (inside oxygen builder) consists of a top-sticky div with the menu button, a div wrapping all the page content from different pages and a modal for the menu. If I put the menu div (with the menu button) outside the smooth-scrolling page div, logically it scrolls the entire page up for a split second once the button is clicked and the modal opens (which is the opposite of smooth xD). But when I put the menu div inside the smooth scrolling div, it won't stick to the top of the page anymore, or - if I force it to stick - floats randomly around the page (also not sticking on the top).
Is there anything I can do to keep the sticky menu on top and still use smooth scrolling (since I really like it)?
My page is "https://staging.jone.io"
Thank you for your time reading this, I hope you can understand my somewhat broken English :D
Hey,
Thanks for your feedback!
In your case you have to put the div wrapping your page content inside the smooth scroll container, and everything else outside (top sticky menu and modal).
Regarding the issue with the site scrolling up on menu toggle, it's possibly because you switch to overflow hidden when the menu is visible, but I would have to see it to better guide you.
Thank you for your quick reply.
I experimented a bit, but I still haven't managed to get it to work properly. I would be really grateful if you could help me in that regard. If you want to take a look at the exact thing that happens, I temporarily enabled it on my homepage. If you open "https://jone.io/luge", scroll down and open the menu, you see what I mean.
Changing the overflow on the modal didn't change anything, as far as I could tell.
I think it comes from the body.oxy-modal-active style, why are you setting the position to fixed when opening the modal? I assume you could only set the overflow-y to hidden.
The latest luge version preserves the native scroll, which should fixed this issue.