Sticky Headers And Full-Height Elements: A Tricky Combination

A pretty funny article I worked on Philip Braunen. You know that little elasticity you experience when scrolling beyond the viewport while browsing the web on a mobile device? The iPhone calls it a “rubber band” effect. And you know it’s cool because Apple previously fought to own a copyright therein.

Anyway, Philip has described in Smashing Magazine a clever approach to mimicking rubber-banding in CSS – not only for non-mobile UI, but also for any Type of container you like.

But what about sticky headers and footers? If these need to be pinned to the container’s block edges, how the heck can we include them in rubberbanding? Phillip’s trick is an extra div before the header, although we can get more precise markup using pseudos instead.

Direct link →