It takes as much energy to wish as it does to plan. — Eleanor Roosevelt
The other day, I spotted this particularly lovely bit from Corey Ginnivan’s website where a collection of cards stack on top of one another as you scroll.… Read article “Stacked Cards with Sticky Positioning and a Dash of Sass”
You know those times you get a horizontal scrollbar when accidentally placing an element off the right edge of the browser window? It might be a menu that slides in or the like. Sometimes we to overflow-x: hidden; on the body to fix that, but that can sometimes wreck stuff like position: sticky;.
Well, you know how if you place an element off the left edge of a browser window, it doesn’t do that? That’s “data loss” and just … Read article “A “new direction” in the struggle against rightward scrolling”
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”
Mike Solomon worked on a fancy scrollytelling post for Esquire and blogged about it. It has GIFs of each step along the way of figuring out not just position: sticky; but also using negative margins, wrapper divs, backgrounds, and even a smidge of JavaScript measuring to get it all right.
What it doesn’t have is any isolated demo of the effect. I figured I’d give a crack at reverse engineering it. … Read article “Getting Fancy with position: 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 individual element in a row. … Read article “Position Sticky and Table Headers”
Any overflow value other than visible and no height is the enemy of child elements with position: sticky;. It’s like that element is ready to stick when the parent scrolls, but it never does because the height is unconstrained. Adding a fixed height can solve the issue, but that’s not always desirable.
Dannie Vinther digs into a way of dealing with that. The end result is avoiding that situation all together by removing the element that wants to be … Read article “Dealing with overflow and position: sticky;”
I rather like position: sticky;. It has practical use cases. I think of things like keeping a table of contents in a sidebar of a long article, but as a fairly simple implementation and without risk of overlapping things in awkward ways. But Elad Shechter is right here: it’s not used that much — at least partially — and probably because it’s a bit weird to understand.
I like how Elad explains it with a “Sticky Item” and a … Read article “More Like position: tricky;”
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”
Just like the title says! Here’s a sidebar navigation bar that…
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. 