I am working on a responsive design where I have a div container that should be fixed at the bottom of the viewport. The problem is that the div keeps moving when I scroll up/down the page and it takes a little while until its back in its fixed position.
Does anyone have an idea how to fix this jumping around? What else can I do than position: fixed and bottom: 0?
Thanks!! :)
For my current project, I had a <nav>
element with a fixed position nested inside a <header>
element with its own fixed position (semantically it could make sense to nest the nav the header for the DOM tree, but visually we wanted them to appear in separate places within the UI). Moving the nav out of the header, making it an immediate child of the <body>
element, solved the problem.
There is a great article here. In my case I had the fixed element inside of the scrolling div. Once I placed it outside, no more jitters.
https://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With