Skip to main content
CSS-Tricks
  • Articles
  • Videos
  • Almanac
  • Newsletter
  • Guides
  • DigitalOcean
  • DO Community
Search

Articles Tagged
sticky

23 Articles
{
,

}
Direct link to the article Stacked Cards with Sticky Positioning and a Dash of Sass
scss sticky

Stacked Cards with Sticky Positioning and a Dash of Sass

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

Avatar of Robin Rendle
Robin Rendle on Aug 13, 2020
Direct link to the article A “new direction” in the struggle against rightward scrolling
direction overflow rtl sticky

A “new direction” in the struggle against rightward scrolling

Direct Link

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 …

Avatar of Chris Coyier
Shared by Chris Coyier on May 21, 2020
Direct link to the article Indicating Scroll Position on a Page With CSS
scrolling sticky

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 …

Avatar of Preethi
Preethi on Mar 24, 2020
Direct link to the article Getting Fancy with position: sticky;
sticky

Getting Fancy with position: sticky;

Direct Link

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 …

Avatar of Chris Coyier
Shared by Chris Coyier on Feb 6, 2020
Direct link to the article Position Sticky and Table Headers
sticky tables

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 …

Avatar of Chris Coyier
Chris Coyier on Jul 12, 2019 (Updated on Mar 5, 2020)
Direct link to the article Dealing with overflow and position: sticky;
scrolling sticky

Dealing with overflow and position: sticky;

Direct Link

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

Avatar of Chris Coyier
Shared by Chris Coyier on Feb 25, 2019
Direct link to the article More Like position: tricky;
sticky

More Like position: tricky;

Direct Link

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 …

Avatar of Chris Coyier
Shared by Chris Coyier on Feb 4, 2019
Direct link to the article Creating sliding effects using sticky positioning
sliding sticky sticky footer

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

Avatar of Preethi
Preethi on Sep 10, 2018
Direct link to the article Sticky, Smooth, Active Nav
navigation sticky

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
…
Avatar of Chris Coyier
Chris Coyier on Aug 7, 2018
Direct link to the article Sticky as a Local Fixed?
fixed position modal scrolling sticky

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.
Avatar of Chris Coyier
Chris Coyier on Mar 26, 2018
sticky

Stickybits: an alternative to `position: sticky` polyfills

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 …

Avatar of Jeff Wainwright
Jeff Wainwright on Jun 25, 2017
  • Newer
  • 1
  • 2
  • 3
  • Older

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • DigitalOcean
  • DigitalOcean Community
  • About DigitalOcean
  • Legal
  • Free Credit Offer
CSS-Tricks
  • Email
  • Guest Writing
  • Book
  • Advertising
Follow
  • Mastodon
  • Twitter
  • Instagram
  • YouTube
  • CodePen
  • iTunes
  • RSS
Back to Top