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

A “new direction” in the struggle against rightward scrolling

Article

Indicating Scroll Position on a Page With CSS

Scrolling is something we all know and do on the web to the extent that it’s an expectation or perhaps even a habit, like brushing our teeth. That’s probably why we don’t put too much thought into designing the scrolling experience — it’s a well-known basic function. In fact, the popular “there is no fold” saying comes from the idea that people know how to scroll and there is no arbitrary line that people don’t go under.

Scroll-based features tend … Read article “Indicating Scroll Position on a Page With CSS”

Link

Getting Fancy with position: sticky;

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 individual element in a row. … Read article “Position Sticky and Table Headers”

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 “Creating sliding effects using sticky positioning”

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 “Sticky, Smooth, Active Nav”
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.