Sticky Headers And Full-Height Elements: A Tricky Combination

Quite a fun article I worked on with Philip Braunen. Do you know that little bit of elasticity you get when scrolling beyond the viewport when browsing the web on a mobile device? iPhone calls it a “rubber-banding” effect. …


Sticky Headers And Full-Height Elements: A Tricky Combination originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.


This content originally appeared on CSS-Tricks and was authored by Geoff Graham

Quite a fun article I worked on with Philip Braunen. Do you know that little bit of elasticity you get when scrolling beyond the viewport when browsing the web on a mobile device? iPhone calls it a “rubber-banding” effect. And you know it’s cool because Apple has previously fought to hold a copyright on it.

Anyway, Philip wrote into Smashing Magazine with a clever approach to mimic rubber-banding in CSS — not only for non-mobile UI but also applied to any sort of container you like.

But what about sticky headers and footers? If those have to be pinned to the container’s block edges, then how in heck do we include them in the rubber banding? Phillip’s trick is an extra div before the header, though we can get more concise markup using pseudos instead.


Sticky Headers And Full-Height Elements: A Tricky Combination originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.


This content originally appeared on CSS-Tricks and was authored by Geoff Graham


Print Share Comment Cite Upload Translate Updates
APA

Geoff Graham | Sciencx (2024-09-09T14:09:12+00:00) Sticky Headers And Full-Height Elements: A Tricky Combination. Retrieved from https://www.scien.cx/2024/09/09/sticky-headers-and-full-height-elements-a-tricky-combination-2/

MLA
" » Sticky Headers And Full-Height Elements: A Tricky Combination." Geoff Graham | Sciencx - Monday September 9, 2024, https://www.scien.cx/2024/09/09/sticky-headers-and-full-height-elements-a-tricky-combination-2/
HARVARD
Geoff Graham | Sciencx Monday September 9, 2024 » Sticky Headers And Full-Height Elements: A Tricky Combination., viewed ,<https://www.scien.cx/2024/09/09/sticky-headers-and-full-height-elements-a-tricky-combination-2/>
VANCOUVER
Geoff Graham | Sciencx - » Sticky Headers And Full-Height Elements: A Tricky Combination. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/09/09/sticky-headers-and-full-height-elements-a-tricky-combination-2/
CHICAGO
" » Sticky Headers And Full-Height Elements: A Tricky Combination." Geoff Graham | Sciencx - Accessed . https://www.scien.cx/2024/09/09/sticky-headers-and-full-height-elements-a-tricky-combination-2/
IEEE
" » Sticky Headers And Full-Height Elements: A Tricky Combination." Geoff Graham | Sciencx [Online]. Available: https://www.scien.cx/2024/09/09/sticky-headers-and-full-height-elements-a-tricky-combination-2/. [Accessed: ]
rf:citation
» Sticky Headers And Full-Height Elements: A Tricky Combination | Geoff Graham | Sciencx | https://www.scien.cx/2024/09/09/sticky-headers-and-full-height-elements-a-tricky-combination-2/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.