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

Articles Tagged
sticky

19 Articles
{
,

}
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
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
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)
IntersectionObserver sticky

How to Detect When a Sticky Element Gets Pinned

Direct Link

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
Shared by Chris Coyier on Nov 9, 2020
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
  • 1
  • 2
  • Older
Our Learning Partner
Frontend Masters logo
Frontend Masters

Need front-end development training?

Frontend Masters is the best place to get it. They have courses on all the most important front-end technologies, from React to CSS, from Vue to D3, and beyond with Node.js and Full Stack.

CSS-Tricks is created by Chris and a team of swell people.

Keep up to date on web dev

with our hand-crafted weekly newsletter

Tech
  • WordPress (CMS)
  • Jetpack (Search, Backup)
  • WooCommerce (eCommerce)
  • Local (Development)
Hosting
  • Flywheel
Family
  • CodePen
  • ShopTalk Show
Minisites
  • The Power of Serverless
  • Upcoming Conferences
  • Coding Fonts
Contact
  • Email
  • Sponsorship Info
  • Guest Writing
Buy
  • Posters & Swag
  • Membership
Follow
  • Twitter
  • Instagram
  • YouTube
  • CodePen
  • GitHub
  • iTunes
  • RSS
Back to Top