Skip to main content

Sticky Position

The position: sticky; value in CSS is a hybrid of relative and fixed positioning. An element with position: sticky; behaves like a relatively positioned element until it crosses a specified threshold, at which point it becomes fixed. This is particularly useful for creating sticky headers, sidebars, or navigation elements that scroll with the content until a certain point.

Characteristics of position: sticky;​

  1. Initial Behavior: Initially, the element behaves like it's relatively positioned and remains in the normal document flow.

  2. Sticky Positioning: Upon reaching a specified offset (defined by top, right, bottom, left), the element becomes fixed, sticking to that position as the user scrolls.

  3. Scroll Context: The element becomes sticky relative to its nearest scrolling ancestor and containing block (which must also be an ancestor).

  4. Z-Index: The z-index property can be used to control the stacking order of the element.

  5. Boundary: The sticky element sticks only within its containing block. Once the container is scrolled past, the element stops sticking.

Examples​

HTML:

<div class="container">
  <header class="sticky-header">I am a sticky header</header>
  <div class="content">Content goes here...</div>
</div>

CSS:

.container {
  height: 2000px;  /* Simulating a tall container */
}

.sticky-header {
  position: sticky;
  top: 0;
  z-index: 100;
}

In this example, .sticky-header will behave like a normal element until the user scrolls to the top of the viewport, at which point it will stick to the top.

HTML:

<div class="container">
  <aside class="sticky-sidebar">I am a sticky sidebar</aside>
  <div class="content">Content goes here...</div>
</div>

CSS:

.container {
  display: flex;
}

.sticky-sidebar {
  position: sticky;
  top: 20px;
}

Here, .sticky-sidebar will start sticking to the viewport when its top is 20px from the top of the viewport.

Best Practices​

  1. Specify Offsets: Always specify at least one offset (top, right, bottom, left) to indicate at what point the element should start sticking.

  2. Use Within Boundaries: Ensure that the sticky element is used within a container that has a height greater than the sticky element; otherwise, it won't have room to stick and unstick.

  3. Cross-Browser Compatibility: While position: sticky; is widely supported, it's good to check compatibility and consider fallbacks for older browsers.

  4. Performance: position: sticky; is generally well-optimized, but excessive use can lead to performance issues, especially on mobile devices.

  5. Accessibility: Ensure that the sticky behavior does not interfere with the usability and accessibility of the website, especially for keyboard and screen reader users.