Creating a Scrollable Sticky Sidebar using CSS and JavaScript Tutorial

Submitted by oretnom23 on Monday, March 20, 2023 - 16:58.

In this tutorial, you will learn how to create Scrollable Sticky Sidebar using CSS and JavaScript. The main purpose of this tutorial is to provide students and beginners with a reference to learn some CSS and JS tricks that are useful for building a creative website. Here, I will be providing simple web page scripts that demonstrate how the scrollable sticky sidebar can be achieved.

What is a Scrollable Sticky Sidebar?

This tutorial refers to a simple sticky sidebar of the website or web application. This feature or component is often used in websites such as CMS (Content Management System) sites where developers place some widgets on the page sidebar. Although this component is scrollable, this has no scrollbar on its own which means it scrolls along with the main wrapper container of the page.

How to create a Scrollable Sticky Sidebar?

The Scrollable Sticky Sidebar can be easily achieved using CSS useful properties and JS event listeners and built it element properties. Yes, we can create a scrollable sticky sidebar using CSS only but it will only await the remaining scroll area of the content wrapper and the sidebar to be able the sidebar reaches the bottom of the sidebar's content. But, here we will make the sidebar scroll along with the main wrapper and stop and stick to the side of the page showing the bottom area of the sidebar if the main wrapper content is longer than the sidebar. Check out the web page scripts I created below to understand it more.

Sample Web Page

The scripts below will result in a simple web page that contains static and skeleton content that simulates the site article list and sidebar widget. The sidebar container is scrollable yet sticky when reaches the end of its area first.

Page Interface

The script below is the HTML file script named index.html. It contains the page layout elements whereas the main container/wrapper and its sample item and the sidebar container and its sample widget item.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS - Scrollable Sticky Sidebar</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="content-md-lg py-3">
        <div class="page-title">Scrollable Sticky Sidebar using JavaScript</div>
        <hr style="margin:auto; width:25px" class="border-light opacity-100">
        <div class="container-lg">
            <div class="row py-3">
                <!-- Main Content Wrapper -->
                <div id="main-content-list" class="col-lg-7 col-md-7 col-sm-7 col-7">
                    <div class="card shadow rounded-0 bg-dark mb-3 border-dark-subtle content-item">
                        <div class="card-body">
                            <div class="container-fluid">
                                <div class="img-content"></div>
                                <div class="title-content"></div>
                                <div class="description-content"></div>
                                <div class="description-content"></div>
                                <div class="description-content"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Main Content Wrapper -->
                <!-- Sidebar Wrapper -->
                <div class="col-lg-5 col-md-5 col-sm-5 col-5 position-relative">
                    <div id="sidebar">
                        <div class="card shadow rounded-0 bg-dark mb-3 border-dark-subtle sidebar-item">
                            <div class="card-body">
                                <div class="container-fluid">
                                    <div class="position-relative d-flex flex-wrap">
                                        <div class="img-content"></div>
                                        <div class="title-content"></div>
                                    </div>
                                    <div class="description-content"></div>
                                    <div class="description-content"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Sidebar Wrapper -->
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

Stylesheet

Next, here is the CSS file script known as style.css. The script contains the custom style codes of some of the page elements.

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@200&family=Space+Mono&display=swap" rel="stylesheet');
:root{
    --space-mono-font: 'Space Mono', monospace;
    --border-dark-subtle: #3c3c3c!important; 
}
*{
    box-sizing: border-box;
}
body *{
    font-family: var(--space-mono-font);
}
/**
Page Design
*/
body,
html{
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
body{
    background-color: #282A3A;
}
.page-title{
    font-size: 2.5rem;
    font-weight: 500;
    color: #fff;
    letter-spacing: 3px;
    font-family: var(--secular-font);
    text-align: center;
    text-shadow: 0px 0px 3px #2020208c;
}
.border-dark-subtle{
    border-color: var(--border-dark-subtle)
}
 
/* Main content container and its items  */
#main-content-list{
    counter-reset : imgCount;
}
#main-content-list .img-content{
    display: relative;
    width: 75%;
    height: 150px;
    display:flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    background-color: aliceblue;
}
#main-content-list .img-content:before{
    counter-increment: imgCount;
    content: counter(imgCount);
    font-size: 1.3rem;
    font-weight:bold;
    color:#c1c1c1;
}
#main-content-list .title-content{
    width: 75%;
    height: 1.3rem;
    margin:.5em 0;
    background-color: aliceblue;
}
#main-content-list .description-content{
    width: 100%;
    height: 1rem;
    margin:.5em 0;
    background-color: aliceblue;
}
/* sidebar container and its items  */
#sidebar{
    counter-reset: sideimgCount;
    width: 100%;
}
#sidebar .img-content{
    position: relative;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    background-color: aliceblue;
}
#sidebar .img-content:before{
    counter-increment: sideimgCount;
    content: counter(sideimgCount);
    font-size: 1rem;
    font-weight:bold;
    color:#c1c1c1;
}
#sidebar .title-content{
    width: calc(90% - 80px);
    height: 1.3rem;
    margin:.5em 0;
    background-color: aliceblue;
}
#sidebar .description-content{
    width: 100%;
    height: 1rem;
    margin:.5em 0;
    background-color: aliceblue;
}

JavaScript

Lastly, here is the JavaScript file script named script.js. It contains the JS codes for cloning the sample main content items and sidebar widgets to make the page scrollable so we can simulate the functionality of the scrollable sticky sidebar. It also contains the window scroll event listener and triggers the sidebar stick and displays the bottom area of its content.

// Main Content Selector 
const MainContent = document.getElementById('main-content-list')
 
// Sidebar Selector 
const sidebar = document.getElementById('sidebar')
 
//Main content First Item
const mainContentItem = MainContent.querySelector('.content-item:nth-child(1)')
//Sidebar's First Item
const sidebarItem = sidebar.querySelector('.sidebar-item:nth-child(1)')
 
/** Cloning the main content and sidebar content to make the page scrollabel */
window.addEventListener('load', () => {
        /** cloning the Main content item 9 times to have a total of 10 main content items */
        for(var i=0; i < 9; i++){
            var clonedItem = mainContentItem.cloneNode(true)
            MainContent.appendChild(clonedItem)
        }
        /** cloning the Sidebar item 4 times to have a total of 5 Sidebar items */
        for(var i=0; i < 4; i++){
            var clonedItem = sidebarItem.cloneNode(true)
            sidebar.appendChild(clonedItem)
        }
})
 
/** watch or listen if the client page is scrolled */
window.addEventListener('scroll', () => {
    // Getting the sidebar excess height to viewport
    var sidebarBase = sidebar.getBoundingClientRect().height - window.innerHeight;
    // current Scroll
    var currentScrollY = window.scrollY
 
    if(currentScrollY >= sidebarBase){
    /**
        * Setting sidebar position as sticky when scroll is greater than/equal to exces height and display the bottom items until the end of scroll
        */
    sidebar.style.position = 'sticky'
    sidebar.style.top = `-${sidebarBase}px`
    }
})

Snapshots

Here are the snapshots of the overall result of the scripts I have provided above.

Unscrolled Page Interface

Reaches the Bottom of the Sidebar Content

Reaches the Bottom of the Web Page

There you go! I have also provided the complete source code zip file that I created for this tutorial on this site and it is free to download. The download button can be found below this tutorial's content. Feel free to download it so you can test the script that I created on your local machine and do some experiments to enhance your programming capabilities.

That's it! I hope this Creating a Scrollable Sticky Sidebar using CSS and JavaScript Tutorial will help you with what you are looking for and will be useful for your current and future web application projects.

Explore more on this website for more Tutorials and Free Source Codes.

Happy Coding =)

Add new comment

273 views