Fixed Header that isn’t overlapped by scrollbar?

[BetoSoft]

I tried not using overflow:hidden over the html tag and adding a wrapper inside it, wrapping all the content, the putting overflow:hidden inside this new tag, and now works for Chrome mobile at least.

Here is an example http://104.236.213.23/

On CodePen it’s not working because it’s not full view exactly.

[avesus]

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

[Aybee]

I’ve worked out a simple solution. We don’t even need position:fixed.
See on jsfiddle https://jsfiddle.net/Andreas/u3q1dydw/

[[email protected]]

YES! you can do this.

use below attributes in respective classes:

for main page class give {overflow:hidden;}

for content area class(other then header section) give {overflow-y:scroll;height:calc(100vh – 80px);}

here 80px is: I assumed height of your header, also if you want your footer to be fixed you can subtract that value from 100vh

[spinman001]

@Merri

Thanks….This was exactly what I was looking for.

I’m pretty new to web coding, just trying to see what I can do on my own (of course with help from folks like you)….but I wanted to try and make this happen.

So thanks again for the code sample

[Author]

Posts