How to make a Sidebar Sticky on Page Scroll using CSS ?

Last Updated : 30 Jan, 2024

A Sticky Sidebar contains important links and navigation options fixed on the screen, making it easy for users to access them while scrolling down. This improves the user experience by saving them from scrolling back to the top of the page to find essential information. We have used two different ways to achieve this effect including, position: fixed property and position: sticky property.

Table of Content

Using Position: sticky Property
Using Position: Fixed Property

Using Position: Sticky Property

The .sidebar class is applied to the sidebar div. The property position: -webkit-sticky; and position: sticky; are used to make the sidebar sticky. This means the sidebar will stick to the top of the screen when scrolling down. The property top:10px defines the sidebar should start from the 10 pixels from the top.

Example: Illustration of sidebar sticky on page scroll using position: sticky property.

HTML

<!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> 
        body { 
            font-size: 20px; 
            font-family: Lato, sans-serif; 
        } 
  
        .wrapper { 
            display: flex; 
        } 
  
        .main { 
            width: 75%; 
            height: 200vh; 
            min-height: 1000px; 
            display: flex; 
            flex-direction: column; 
            background: #fff; 
            padding-left: 10px; 
        } 
  
        .sidebar { 
            width: 25%; 
            height: 100vh; 
            min-height: 200px; 
            overflow: auto; 
            background: #a7e9c5; 
            color: #48793c; 
            position: -webkit-sticky; 
            position: sticky; 
            top: 10px; 
            font-size: 25px; 
        } 
  
        .st-h3 { 
            padding-left: 30px; 
        } 
  
        li { 
            list-style: none; 
            padding: 10px; 
        } 
  
        h2 { 
            color: green; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="wrapper"> 
        <div class="sidebar"> 
            <h3 class="st-h3"> 
                GFG Sticky sidebar 
            </h3> 
            <ul> 
                <li>Home</li> 
                <li>About us</li> 
                <li>Contact us</li> 
                <li>Our product</li> 
            </ul> 
        </div> 
  
        <div class="main"> 
            <h2>GeeksforGeeks</h2> 
            <h3>Scroll down the page!</h3> 
            <p>Sidebar sticky on page scroll</p> 
            <p> 
                <!-- Main content goes here -->
                When the browser window is resized, the labels 
                and inputs will stack on top of each other for 
                smaller screens. To create a responsive inline 
                form using CSS, use a container with flexible 
                styling, such as Flexbox or Grid, to arrange 
                form elements horizontally. Utilize media 
                queries to adjust the layout for smaller 
                screens, ensuring a user-friendly experience 
                across various devices. 
                Embark on an extraordinary coding odyssey 
                with our groundbreaking course, "DSA to 
                Development - Complete Coding Guide"! 
                ???? Discover the transformative power of 
                mastering Data Structures and Algorithms 
                (DSA) as you venture towards becoming a 
                Proficient Developer or Data Scientist.      
            </p> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

sticky_sidebar

Using Position: Fixed Property

The element with .sidebar class is applied to the sidebar div. The CSS property position: fixed; is used to make the sidebar fixed. This means the sidebar will stay in a fixed position on the screen, even when scrolling down. The property top:10px defines the sidebar should start from the 10pixels from top.

Example: Illustration of sidebar sticky on page scroll using position: fixed property.

HTML

<!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> 
        body { 
            font-size: 20px; 
            font-family: Lato, sans-serif; 
        } 
  
        .wrapper { 
            display: flex; 
        } 
  
        .main { 
            width: 70%; 
            height: 200vh; 
            min-height: 1000px; 
            display: flex; 
            flex-direction: column; 
            background: #fff; 
            padding-left: 10px; 
            position: absolute; 
            left: 25vw; 
        } 
  
        .sidebar { 
            width: 25%; 
            height: 100vh; 
            min-height: 200px; 
            overflow: auto; 
            background: #beddf0; 
            color: #48793c; 
            position: fixed; 
            top: 10px; 
            font-size: 25px; 
        } 
  
        .st-h3 { 
            padding-left: 30px; 
        } 
  
        li { 
            list-style: none; 
            padding: 10px; 
        } 
  
        h2 { 
            color: green; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="wrapper"> 
        <div class="sidebar"> 
            <h3 class="st-h3"> 
                GFG Sticky sidebar 
            </h3> 
            <ul> 
                <li>Home</li> 
                <li>About us</li> 
                <li>Contact us</li> 
                <li>Our product</li> 
            </ul> 
        </div> 
  
        <div class="main"> 
            <h2>GeeksforGeeks</h2> 
            <h3>Scroll down the page!</h3> 
            <p>Sidebar sticky on page scroll</p> 
            <p> 
                <!-- Main content goes here -->
                When the browser window is resized, the labels 
                and inputs will stack on top of each other for 
                smaller screens. To create a responsive inline 
                form using CSS, use a container with flexible 
                styling, such as Flexbox or Grid, to arrange 
                form elements horizontally. Utilize media 
                queries to adjust the layout for smaller 
                screens, ensuring a user-friendly experience 
                across various devices. 
                Discover the transformative power of 
                mastering Data Structures and Algorithms 
                (DSA) as you venture towards becoming a 
                Proficient Developer or Data Scientist.                 
            </p> 
        </div> 
    </div> 
</body> 
  
</html>