A sticky sidebar can improve website navigation and keep important content visible as users scroll through the main page. In this guide, we’ll explore how to create a sticky sidebar using only CSS. No JavaScript is required!

What Is a Sticky Sidebar?

A sticky sidebar remains visible on the screen while the user scrolls through the main content. This is particularly useful for menus, widgets, or advertisements that you want to keep in focus.

HTML Structure

To start, we’ll create a simple layout with a sidebar and a main content area.

<div class="container">
  <aside class="sidebar">
    <h2>Sidebar</h2>
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
    </ul>
  </aside>
  <main class="content">
    <h1>Main Content</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula mauris a lorem sagittis, id ullamcorper est tincidunt.</p>
    <p>Scroll to see how the sidebar stays in place!</p>
    <!-- Add more content here to enable scrolling -->
  </main>
</div>

CSS for Sticky Sidebar

Here’s the CSS to make the sidebar sticky:

/* Basic Reset */
body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.container {
  display: flex;
  gap: 20px;
  padding: 20px;
}

.sidebar {
  flex: 0 0 250px; /* Fixed width */
  position: sticky;
  top: 20px; /* Distance from the top of the viewport */
  height: fit-content; /* Ensures the sidebar doesn’t stretch */
  background-color: #f8f9fa;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.content {
  flex: 1; /* Take up remaining space */
}

h1, h2 {
  margin-top: 0;
}

p {
  line-height: 1.6;
}

ul {
  list-style-type: none;
  padding: 0;
}

ul li {
  margin-bottom: 10px;
}

ul li a {
  text-decoration: none;
  color: #007bff;
}

ul li a:hover {
  text-decoration: underline;
}

How It Works

  1. Flexbox Layout: The .container uses display: flex to align the sidebar and the main content side-by-side.

  2. Sticky Positioning: The .sidebar is styled with position: sticky and top: 20px, which means it will "stick" to the top of the viewport once the user scrolls past it.

  3. Fit Content: Setting the sidebar’s height to fit-content ensures it wraps around its content without stretching.

  4. Styling: Additional styles like background-color, padding, and box-shadow give the sidebar a polished look.

Testing the Sticky Sidebar

To see the sticky sidebar in action, add enough content in the <main> section to enable scrolling. For example:

<p>Repeat this paragraph a few times to test the sticky effect:</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula mauris a lorem sagittis, id ullamcorper est tincidunt.</p>

Browser Compatibility

The position: sticky property is supported in most modern browsers. However, if you need to support older browsers, consider using JavaScript for fallback functionality.

Creating a sticky sidebar with CSS is straightforward and doesn’t require JavaScript. By using position: sticky, you can achieve this effect with minimal code and ensure a better user experience. Try it out in your next project and see how it enhances your design!