Dennyno Posted April 8, 2022 Share Posted April 8, 2022 Hi, I did a quick demo to show the issue. Scrollsmoother works great, as it promise. On a production site of a customer I hade to add a second wrapper, being that only after a deep read I found that it adds a position fixed to the original wrapper. (works a bit like LocomotiveJs with matrix transform while scrolling). I found a problem which I cant solve: fixed elements dont stay fixed at all. Example: nav menu should stay there, and also the scrolltop on the demo, should stay at bottom, while with scrollsmoother jumps away, totally messing the fixed, both on mobile and desktop. Any fix on this please? Thanks See the Pen RwxyKZG by DedaloD (@DedaloD) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted April 8, 2022 Share Posted April 8, 2022 Hello Dennyno. In smooth-scrolling environments, due to the transforms being applied to the smooth-crolling container, the context for position: fixed elements inside that container will get changed, thus they won't stay fixed. So you'll have to take them out of that container. This is from the docs <body> <div id="smooth-wrapper"> <div id="smooth-content"> <!--- ALL YOUR CONTENT HERE ---> </div> </div> <!-- position: fixed elements can go outside ---> </body> [...] Caveats position: fixed should be outside the wrapper - since the content has a CSS transform applied, browsers create a new containing block and that means position: fixed elements will be fixed to the content rather than the viewport. That's not a bug - it's just how CSS/browsers work. You can use ScrollTrigger pinning instead or you could put any position: fixed elements OUTSIDE the wrapper/content. See the Pen XWVqRma by akapowl (@akapowl) on CodePen 4 Link to comment Share on other sites More sharing options...
Dennyno Posted April 9, 2022 Author Share Posted April 9, 2022 @akapowl thanks a lot. Yep I misunderstood the word "<!-- position: fixed elements can go outside --->" can, as... yep.. you are free to put fixed element even outside, or where you want. 😅 It's a must instead. And yep the reason is what you said,. being a translated element the position fixed is totally gone. Thanks, I will update the demo to show problem/solution. 2 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now