Question

Here is a basic example of sticky header:

#header {
    position:fixed;
    background-color: #CCE;
    width: 500px;
}
...
#content {
    background-color: #EEE;
    width: 500px;
}

The header is fixed, and the content underneath scrolls. One problem with that is that if you zoom the page (you do it often on a mobile browser), the right part of the header is no longer accessible, even if you scroll right.

Fiddle with my example here: http://jsfiddle.net/76haM/ (zoom to see it in action)

How to make a sticky header that "behaves" well on zoom?

Answer 1

This will not work since you specified a fixed width:

#header {
    width: 500px;
}

Because of the zooming, the width of the header will be wider than the screen, causing the text to fall off.

When you have a percentage-based width, you’ll get better results with the right element since the width will resize properly according to the screen:

#header {
    width: 100%;
}

JSFiddle.