Skip to main content
CSS-Tricks
  • Articles
  • Alamanac
  • Guides
  • Videos
  • Books
  • Newsletter
Search

Articles Tagged
sticky

23 Articles
{
,

}
Direct link to the article How to Make a “Raise the Curtains” Effect in CSS
mix-blend-mode scrolling sticky

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.…

Avatar of Silvestar Bistrović
Silvestar Bistrović on Mar 2, 2022
Direct link to the article Using Position Sticky With CSS Grid
grid sticky

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 …

Avatar of Chris Coyier
Chris Coyier on Dec 10, 2021
Direct link to the article A Clever Sticky Footer Technique
sticky sticky footer

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 …

Avatar of Chris Coyier
Chris Coyier on Nov 16, 2021 (Updated on Nov 17, 2021)
Direct link to the article Sticky Headers: 5 Ways to Make Them Better
sticky

Sticky Headers: 5 Ways to Make Them Better

Page Laubheimer says that if you’re going to do a sticky header…

  1. Keep it small.
  2. Visually contrast it with the rest of the page.
  3. If it’s going to move, keep it minimal. (I’d say, respect prefers-reduced-motion.)
  4. Consider “partially persistent
…
Avatar of Chris Coyier
Chris Coyier on Apr 21, 2021
Direct link to the article Creating a Smart Navbar With Vanilla JavaScript
navigation sticky

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 …

Avatar of Jemima Abu
Jemima Abu on Apr 5, 2021
Direct link to the article #205: Sticky Positioning: How it Works, What Can Break It, and Dumb Tricks
sticky

#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 …

Avatar of Chris Coyier
Chris Coyier on Mar 15, 2021 (Updated on Jul 9, 2021)
Direct link to the article How to Create a Shrinking Header on Scroll Without JavaScript
navigation scrolling sticky

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 …

Avatar of Håvard Brynjulfsen
Håvard Brynjulfsen on Feb 16, 2021 (Updated on Jun 7, 2021)
Direct link to the article A table with both a sticky header and a sticky first column
sticky tables

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 …

Avatar of Chris Coyier
Chris Coyier on Feb 9, 2021
Direct link to the article How to Get Sticky and Full-Bleed Elements to Play Well Together
grid sticky

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 …

Avatar of Silvestar Bistrović
Silvestar Bistrović on Dec 4, 2020 (Updated on Jan 14, 2021)
Direct link to the article A Dynamically-Sized Sticky Sidebar with HTML and CSS
sticky

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 …

Avatar of Ryan Mulligan
Ryan Mulligan on Nov 20, 2020 (Updated on Feb 10, 2021)
Direct link to the article How to Detect When a Sticky Element Gets Pinned
IntersectionObserver sticky

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 :stuck CSS directive we could use, but instead the best we can

…
Avatar of Chris Coyier
Chris Coyier on Nov 9, 2020
  • 1
  • 2
  • 3
  • Older

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • About DO
  • Cloudways hosting
  • Legal stuff
  • Get free credit!
CSS-Tricks
  • Write for us!
  • Advertise with us
  • Contact us
Social
  • RSS Feeds
  • CodePen
  • Mastodon
  • X
Back to Top