Prevent Fixed Toolbars/Navbars from Scrolling in iOS

I noticed on the kitchen sink page Toolbar & Tabbar when you drag the content up or down it also pulls the toolbars up/down with the page content.


Is there any way to prevent the fixed toolbars from moving? I want them to be fixed and not affected by any up/down touch movements.

Expected Behavoir:
When I swipe the page up/down only the main page content should scroll up/down no matter how much content it contains.
When I swipe a toolbar/footer up/down it should not them move at all.

Tested with latest iOS Safari

When I override the the .navbar class to { position: fixed !important; touch-action: none; } it sorta fixes the issue. Still playing around with it.


There were a lot of discussions on forum about it like this one Advice on how to stop the tabbed bar and nav bar from floating

And a lot of solutions on web, BUT none of them is 100% bulletproof

Hi @Shawn_Jackson, I have the same problem and I couldn’t solve it with the css, is there another way?

hello @nolimits4web, so there is no solution?