Hi folks! I threw together a Codepen to demo using position: sticky to "stick" section headers to the side of the screen while scrolling long blocks of content.
This layout pattern could be used for a list of blog posts, comments on a single blog post, or for keeping share buttons in view on long article pages. It could also be used for an instant messaging layout to "stick" a user's profile picture next to their message.
On mobile screen sizes, the headers stack vertically but stay sticky at the top of the screen.
Resources Used
- Happy Hues for the colour palette.
- Font Awesome for social icons.
References
- This CSS Tricks article on scaling font-size based on the viewport.
- More generally, I've been doing the amazing CSS for JavaScript Developers course which has been inspiring me to learn CSS in-depth as a language, rather than as a collection of hacks and tricks.
Top comments (0)