How to Make a “Raise the Curtains” Effect in CSS
“Raise the curtains” is what I call an effect where the background goes from dark to light on scroll, and the content on top also goes from light to dark while in a sticky position.…
Articles Tagged
sticky
23 Articles
Using Position Sticky With CSS Grid
Say you’ve got a two-column CSS grid and you want one of those columns to behave like position: sticky;. There is nothing stopping you from doing that. But the default height for those two columns is going to be …
Chris Coyier
on
A Clever Sticky Footer Technique
Upon hearing “sticky footer” these days, I would think most people imagine a position: sticky situation where a footer element appears fixed on the screen while in the scrolling context of some parent element.
That’s not quite what I’m talking …
Chris Coyier
on
(Updated on )
Sticky Headers: 5 Ways to Make Them Better
Page Laubheimer says that if you’re going to do a sticky header…
- Keep it small.
- Visually contrast it with the rest of the page.
- If it’s going to move, keep it minimal. (I’d say, respect
prefers-reduced-motion.) - Consider “partially persistent
Shared by
Chris Coyier
on
Creating a Smart Navbar With Vanilla JavaScript
Sticky, or fixed, navigation is a popular design choice because it gives users persistent access to navigate the site. On the other hand, it takes up space on the page and sometimes covers content is a way that’s less than …
Jemima Abu
on
#205: Sticky Positioning: How it Works, What Can Break It, and Dumb Tricks
How it works
You apply position: sticky; to an element along with a top, left, right, or bottom threshold and it will “stick” in that position when the threshold is passed, as long as there is room …
Chris Coyier
on
(Updated on )
How to Create a Shrinking Header on Scroll Without JavaScript
Imagine a header of a website that is nice and thick, with plenty of padding on top and bottom of the content. As you scroll down, it shrinks up on itself, reducing some of that padding, making more screen real …
Håvard Brynjulfsen
on
(Updated on )
A table with both a sticky header and a sticky first column
We’ve covered that individual <table> cells, <th> and <td> can be position: sticky. It’s pretty easy to make the header of a table stick to the top of the screen while scrolling through a bunch or rows (like this …
Chris Coyier
on
How to Get Sticky and Full-Bleed Elements to Play Well Together
I had a unique requirement the other day: to build a layout with full-bleed elements while one element stays stuck to the top. This ended up being rather tricky to pull off so I’m documenting it here in case anyone …
Silvestar Bistrović
on
(Updated on )
A Dynamically-Sized Sticky Sidebar with HTML and CSS
Creating page content that sticks to the viewport as you scroll, something like a jump-to-anchor menu or section headings, has never been easier. Throw a position: sticky into your CSS ruleset, set the directional offset (e.g. top: 0) and …
Ryan Mulligan
on
(Updated on )
How to Detect When a Sticky Element Gets Pinned
Totally agree with David, on CSS needing a selector to know if a position: sticky; element is doing its sticky thing or not.
…Ideally there would be a
:stuckCSS directive we could use, but instead the best we can
Shared by
Chris Coyier
on
