Scroll Container Approach
Body is locked, content scrolls inside this container.
Header + banner always stay fixed and visible.
Trade-off: Chrome's URL bar won't collapse.
How It Works
html/body have overflow: hidden
Content is inside a fixed scroll container
No Chrome iOS viewport bug!
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
More Content
Ut enim ad minim veniam, quis nostrud exercitation ullamco.
Duis aute irure dolor in reprehenderit in voluptate velit.
Keep Scrolling
Excepteur sint occaecat cupidatat non proident.
Sunt in culpa qui officia deserunt mollit anim id est laborum.
Almost There
Sed ut perspiciatis unde omnis iste natus error sit voluptatem.
Accusantium doloremque laudantium, totam rem aperiam.
Et harum quidem
Nemo enim ipsam voluptatem quia voluptas sit aspernatur.
Aut odit aut fugit, sed quia consequuntur magni dolores.
Temporibus autem
Quibusdam et aut officiis debitis aut rerum necessitatibus.
Saepe eveniet ut et voluptates repudiandae sint.
Nam libero tempore
Cum soluta nobis est eligendi optio cumque nihil impedit.
Quo minus id quod maxime placeat facere possimus.
Bottom of Page
Header and banner stayed visible the whole time!
URL bar doesn't collapse, but no bugs either.