Articles Tagged sticky

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

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

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

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.

Stickybits is a small JavaScript utility plugin. It's goal is not to get in the way. It does one thing well: help with sticky elements. It is not dependent on other JavaScript Plugins, can be imported via npm, and approaches sticky elements in a very utility-oriented way. … Read article

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