How to Create a Sticky Sidebar Using CSS

Introduction

A sticky sidebar enhances a website's user experience by keeping important navigation or information visible as users scroll down the page. This is especially useful in blogs or e-commerce websites where users need to access certain links or content consistently.

In this tutorial, you'll learn how to create a sticky sidebar using only CSS. We’ll implement a simple layout where the sidebar remains visible while the main content scrolls.

Development Steps

Create the HTML Structure: Set up the basic HTML structure, including a sidebar and main content section.
Style the Layout Using CSS: Define the layout using CSS Flexbox or Grid for the main content and sidebar.
Make the Sidebar Sticky: Use the CSS position: sticky property to make the sidebar sticky.
Customize the Sidebar: Style the sticky sidebar for a visually appealing design.
Make the Sticky Sidebar Responsive: Use media queries to ensure the sidebar works well on smaller screens.

Step 1: Create the HTML Structure

We’ll start by creating a basic layout with a sidebar and main-content section.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sticky Sidebar Example</title>
</head>
<body>

    <!-- Step 1: Create the sidebar and main content layout -->
    <div class="container">
        <div 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>
        </div>

        <div class="main-content">
            <h1>Main Content</h1>
            <p>This is the main content area. As you scroll, the sidebar will stick to the top of the viewport.</p>
            <p>More content here...</p>
            <p>Additional paragraphs...</p>
            <p>Keep scrolling to see the sticky effect.</p>
            <!-- Add as much content as needed to create scroll effect -->
        </div>
    </div>

</body>
</html>

Explanation:

The container holds both the sidebar and main-content sections. We'll make the sidebar sticky and style the layout using CSS.

Step 2: Style the Layout Using CSS

Now, we’ll use Flexbox to structure the layout so that the sidebar and main-content appear side by side.

/* Step 2: Style the container and layout */
.container {
    display: flex;  /* Use Flexbox to align sidebar and content */
    gap: 20px;  /* Space between the sidebar and main content */
}

.sidebar {
    width: 200px;  /* Set a fixed width for the sidebar */
    padding: 20px;
    background-color: #f1f1f1;  /* Light background for the sidebar */
    border-radius: 5px;
}

.main-content {
    flex-grow: 1;  /* Main content takes up the remaining space */
    padding: 20px;
    background-color: #fff;  /* White background for the main content */
    border-radius: 5px;
}

Explanation:

.container { display: flex; }: Sets up a flexible layout where the sidebar and main-content are aligned horizontally.
.sidebar { width: 200px; }: The sidebar has a fixed width and light background to distinguish it from the main content.
.main-content { flex-grow: 1; }: The main content grows to fill the available space next to the sidebar.

The key to making a sidebar sticky is using the CSS position: sticky property. We’ll apply this to the sidebar and define the point where it sticks.

/* Step 3: Make the sidebar sticky */
.sidebar {
    position: sticky;  /* Makes the sidebar sticky */
    top: 10px;  /* Sidebar sticks 10px from the top of the viewport */
}

Explanation:

position: sticky;: Enables the sticky behavior, making the sidebar remain visible as the user scrolls down.
top: 10px;: Ensures the sidebar sticks to the viewport, 10px from the top.

Let’s add some additional styles to make the sticky sidebar visually appealing.

/* Step 4: Style the sidebar links */
.sidebar h2 {
    margin-bottom: 20px;
    color: #333;
}

.sidebar ul {
    list-style: none;  /* Remove default list bullets */
    padding: 0;
}

.sidebar ul li {
    margin-bottom: 10px;
}

.sidebar ul li a {
    text-decoration: none;
    color: #007BFF;
    font-weight: bold;
}

.sidebar ul li a:hover {
    color: #0056b3;  /* Darken link on hover */
}

Explanation:

.sidebar h2: Adds margin and color to the sidebar heading.
.sidebar ul: Removes the default bullet points and spacing.
.sidebar ul li a:hover: Changes the link color on hover for better interactivity.

To ensure the sticky sidebar works well on smaller screens, we’ll make it stack on top of the main content in mobile view using media queries.

/* Step 5: Responsive design */
@media (max-width: 768px) {
    .container {
        flex-direction: column;  /* Stack the sidebar and content vertically */
    }

    .sidebar {
        width: 100%;  /* Sidebar takes full width on smaller screens */
    }
}

Explanation:

flex-direction: column;: Stacks the sidebar and main-content vertically on screens smaller than 768px.
width: 100%;: Ensures the sidebar takes the full width of the screen in mobile view.

Complete Code

Here’s the complete HTML and CSS code for creating a sticky sidebar:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sticky Sidebar Example</title>
    <style>
        /* Step 2: Style the container and layout */
        .container {
            display: flex;
            gap: 20px;
        }

        .sidebar {
            width: 200px;
            padding: 20px;
            background-color: #f1f1f1;
            border-radius: 5px;
            position: sticky;
            top: 10px;  /* Step 3: Make the sidebar sticky */
        }

        .main-content {
            flex-grow: 1;
            padding: 20px;
            background-color: #fff;
            border-radius: 5px;
        }

        /* Step 4: Style the sidebar links */
        .sidebar h2 {
            margin-bottom: 20px;
            color: #333;
        }

        .sidebar ul {
            list-style: none;
            padding: 0;
        }

        .sidebar ul li {
            margin-bottom: 10px;
        }

        .sidebar ul li a {
            text-decoration: none;
            color: #007BFF;
            font-weight: bold;
        }

        .sidebar ul li a:hover {
            color: #0056b3;
        }

        /* Step 5: Responsive design */
        @media (max-width: 768px) {
            .container {
                flex-direction: column;
            }

            .sidebar {
                width: 100%;
            }
        }
    </style>
</head>
<body>

    <!-- Sticky Sidebar Layout -->
    <div class="container">
        <div 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>
        </div>

        <div class="main-content">
            <h1>Main Content</h1>
            <p>This is the main content area. As you scroll, the sidebar will stick to the top of the viewport.</p>
            <p>More content here...</p>
            <p>Additional paragraphs...</p>
            <p>Keep scrolling to see the sticky effect.</p>
        </div>
    </div>

</body>
</html>

Output

You can play with the above HTML in Online HTML Editor and Compiler. Here is the output of the above HTML page.:

Conclusion

In this tutorial, you learned how to create a sticky sidebar using CSS. By leveraging Flexbox for layout and the position: sticky property, you can make important navigation or content remain visible as users scroll. Additionally, you styled the sidebar and made it responsive to provide a seamless experience across devices.

Java Guides

Search This Blog