Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Fixed Header that isn’t overlapped by scrollbar? Reply To: Fixed Header that isn’t overlapped by scrollbar?

#250267
avesus
Participant

Fixed header or footer not overlapped by scrollbar is only important in Cordova apps and in Desktop browsers because it looks logical and beautiful. If you set it in a mobile browser, you break its “address bar auto hide” feature and prevent “pull to refresh” in mobile Chrome.

I found how to prevent window scrolling on iOS and only allow scrolling of the overflow-y: scroll element. See my answer on http://stackoverflow.com/a/41762634/84661 with very robust way.

So, the complete solution is to use platform detection and implement:

— Full page scrolling (ignore the fact that header is overlapped by scrollbar) on mobile browsers and Cordova on Android 4.3 and below (if you don’t need to support those, implement full page scrolling only for mobile browsers).

overflow-y: scroll, -webkit-overflow-scrolling: touch and JavaScript (see my snippet on Stackoverflow) to prevent window scroll in Cordova iOS.

overflow-y: auto on Desktop and Cordova for Android 4.4+.

The snippet with code for iOS is here (without platform detection):
http://codepen.io/avesus/pen/apJxYL