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: auto on Desktop and Cordova for Android 4.4+.
The snippet with code for iOS is here (without platform detection):