How to make sticky sidebar in css

CssHow-ToBeginner · 3 min read

How to Make a Sticky Sidebar in CSS: Simple Guide

To make a sticky sidebar in CSS, use position: sticky; on the sidebar element and set a top value to define where it sticks. This keeps the sidebar visible as you scroll down the page, stopping it at the defined offset.

📐

Syntax

The basic syntax to make an element sticky is:

position: sticky; — makes the element stick within its parent container.
top: value; — defines the distance from the top of the viewport where the element will stick.

The element behaves like relative until it reaches the top offset, then it sticks in place.

css

selector {
  position: sticky;
  top: 0; /* distance from top of viewport */
}

💻

Example

This example shows a sidebar that stays visible on the left side as you scroll the page content on the right.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Sticky Sidebar Example</title>
<style>
  body {
    margin: 0;
    font-family: Arial, sans-serif;
    display: flex;
    gap: 20px;
    padding: 20px;
  }
  .sidebar {
    position: sticky;
    top: 20px;
    width: 200px;
    height: 300px;
    background-color: #f0f0f0;
    padding: 10px;
    border: 1px solid #ccc;
  }
  .content {
    flex: 1;
    height: 1000px;
    background: linear-gradient(white, lightblue);
    padding: 10px;
    border: 1px solid #ccc;
  }
</style>
</head>
<body>
  <aside class="sidebar">
    <strong>Sticky Sidebar</strong>
    <p>This sidebar stays visible as you scroll down.</p>
  </aside>
  <main class="content">
    <h1>Page Content</h1>
    <p>Scroll down to see the sidebar stick.</p>
    <p>Lots of content here to enable scrolling...</p>
  </main>
</body>
</html>

Output

A page with a left sidebar box that stays visible near the top as you scroll the tall content on the right side.

⚠️

Common Pitfalls

Not setting a top value will prevent the sticky effect.
The sticky element must be inside a container with enough height to scroll; otherwise, it won't stick.
position: sticky; does not work if any parent has overflow: hidden, overflow: scroll, or overflow: auto that clips the sticky element.
Sticky only works within the boundaries of its parent container.

css

/* Wrong: missing top value */
.sidebar {
  position: sticky;
  /* top is missing, so no sticky effect */
}

/* Right: with top value */
.sidebar {
  position: sticky;
  top: 20px;
}

📊

Quick Reference

position: sticky; — enables sticky positioning.
top: <value>; — sets the vertical offset where the element sticks.
Sticky elements respect their parent container boundaries.
Ensure no clipping overflow on parent containers.

✅

Key Takeaways

Use position: sticky; with a top value to create a sticky sidebar.

Sticky elements stick within their parent container's boundaries only.

Avoid parent containers with overflow properties that clip the sticky element.

Set enough height on the container and page to enable scrolling for the sticky effect.

Test sticky behavior on different browsers for consistent results.