Bootstrap 4 Sticky Sidebar on Scroll Event

Do you want to make the sidebar widget item sticky on scroll? well! you can do it using this code snippet. This Bootstrap 4 code snippet creates a sticky sidebar item on scroll event.

If you are looking for the quick answer to make a sticky item in your existing sidebar, then you just need to add a class name “make-me-sticky” to that item. Then define the CSS style as follows:

.make-me-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0; 
}

Follow the following guide if you want to make a basic Bootstrap page layout (from scratch) with a sticky sidebar.

How to create Bootstrap Sticky Sidebar

1. In the very first step, load the Bootstrap CSS by adding the following CDN link into your webpage.

<!-- Bootstrap CSS -->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css'>

2. Create the basic page layout (header, content section, and sidebar) in HTML as follows:

<article>
    <div class="container-fluid">
        <div class="row">
            <div class="col">
                <div class="title-section">
                    <h1>Bootstrap 4 Sticky Sidebar on Scroll Example</h1>
                </div>
            </div>
        </div>
        <div class="container">
        <div class="row">
            <div class="col-7">
 
                <div class="content-section">
                    <h2>Content Section</h2>
                </div>
            </div>
            <div class="col-5">
 
              <div class="sidebar-item">
                  <div class="widget">
                  <h3> Item 1</h3> 
                  </div>
                  
                <div class="widget make-me-sticky">
                  <h3 style="background: pink">Item 2 (sticky)</h3>
                  
                </div>
                <div class="widget make-me-sticky">
                  <h3>Item 3 (sticky)</h3>
                </div>
              </div>
            </div>
        </div>
     </div>
    </div>
</article>

3. Add the following custom CSS to style the sidebar. The "make-me-sticky" class uses the CSS sticky property to fixed the (widget) item on the top on scroll.

.content-section {
  min-height: 2000px;
}
 
.sidebar-section {
  position: absolute;
  height: 100%;
  width: 100%;
}
 
.sidebar-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Position the items */
}
 
.widget{
    padding: 0 15px;
    margin: 15px 0;
}
 
.make-me-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0; 
}
 
/* Ignore This, just coloring */
body {
  background: #fff;
}
 
article {
  background: #f1f1f1;
  border-radius: 12px;
  padding: 25px;
}
 
.title-section, .content-section, .sidebar-section {
  background: #fff;
}
 
.title-section {
  text-align: center;
  padding: 50px 15px;
  margin-bottom: 30px;
}
 
.content-section h2 {
  text-align: center;
  margin: 0;
  padding-top: 200px;
}
 
.sidebar-item {
  text-align: center;
}
.sidebar-item h3 {
  background: gold;
  max-width: 100%;
  margin: 0 auto;
  padding: 50px 0 100px;
  border-bottom: solid 1px #fff;
}

Hopefully, you have successfully created Bootstrap 4 sticky sidebar on the scroll. If you have any questions let me know by comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.