Skip to main content
CSS is fun and cool and I like it.
Article

Position Sticky and Table Headers

You can't position: sticky; a <thead></thead>. Nor a <tr></tr>. But you can sticky a <th></th>, which means you can make sticky headers inside a regular ol' <table></table>. This is tricky stuff, because if you didn't know this weird quirk, it would be hard to blame you. It makes way more sense to sticky a parent element like the table header rather than each individiaul element in a row. … Read article

Link

Dealing with overflow and position: sticky;

Link

More Like position: tricky;

Article

Creating sliding effects using sticky positioning

Sticky elements are predominantly used for keeping something shown on the screen throughout scrolling. As cool as that is, we can also hide elements in the same way!… Read article

Article

Sticky, Smooth, Active Nav

Just like the title says! Here's a sidebar navigation bar that...

  1. Uses sticky positioning. It stays on the screen when it can, but won't overlap the header, footer, or ever make any of it's links inaccessible.
  2. Scrolls smoothly to the sections you click to.
  3. Activates the current nav based on scroll position (it's a single page thing).
Read article
Article

Sticky as a Local Fixed?

You know how position: relative creates a new context for absolute positioning within an element? Well, position: sticky is a locally scoped version of position: fixed. Let's take a look at how that works using a modal with a sticky close button as an example.
Snippet

Persistant Headers on Tables

When you scroll down a page with a long table on it, typically the header of the table scrolls away and becomes useless. This code clones the table header and applies it at the top of the page once you have scrolled beyond it, and disappears when you have scrolled past the table.

These days, you're probably better off using position: sticky; than using JavaScript, but you'll have to make that browser support call on your own.

function UpdateTableHeaders() {
   
Read article
icon-link icon-logo-star icon-search icon-star