Scrolling in sticky-top For Blog Navbar Inner Blog and Footer With Example Bootstrap 4.1.3

Suraj (UI/UX Developer)

Nov 2024

Scrolling in Sticky-Top for Blog Navbar, Inner Blog & Footer (Bootstrap 4.1.3)

In modern blog websites, smooth scrolling and sticky navigation play a crucial role in enhancing user experience. A sticky-top navbar allows readers to navigate between blog sections effortlessly while scrolling. When combined with inner blog scrolling and a well-structured footer, it creates a clean and professional layout.

In this blog, we will explain how to implement scrolling with sticky-top for a blog navbar, inner blog sections, and footer using Bootstrap 4.1.3, along with a practical working example.

What Is Sticky-Top in Bootstrap 4.1.3?

Bootstrap 4.1.3 provides a utility class called sticky-top.
It keeps an element fixed at the top of the viewport once it reaches that position while scrolling.

Benefits of Sticky-Top Navigation

Improves content accessibility

Enhances user engagement

Ideal for long blog posts

Works without custom JavaScript

Use Case: Blog Navbar with Inner Page Scrolling

In a blog layout:

The navbar stays visible while scrolling

Clicking menu links smoothly scrolls to blog sections

The footer appears naturally after content ends

This setup is especially useful for long-form articles, documentation blogs, and tutorial websites.

Important Notes for Bootstrap 4.1.3

sticky-top works best when parent elements do not have overflow hidden

Add padding-top to sections to prevent overlap

Compatible with modern browsers

No JavaScript required

SEO & Performance Benefits

Using sticky navigation improves:

Time on page

Content discoverability

Mobile usability

Overall blog engagement

Search engines also favor well-structured internal navigation, which helps in better indexing.

Conclusion

Implementing scrolling with sticky-top for blog navbar, inner blog content, and footer using Bootstrap 4.1.3 is simple and highly effective. It enhances user experience, improves readability, and adds a professional touch to your blog design.

This method is perfect for technical blogs, tutorials, and long-content websites.

HTML

<html lang="en">
<head>
   <title>CKD | Unic Scrolling sticky-top Design our Blog and us Bootstrap 4.1.3</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
   <section>
      <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
         <a class="navbar-brand" href="#"><img src="images/malinLogo.png" class="img-fluid p-2 bg-white" width="80"> </a>
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
         </button>
         <div class="collapse navbar-collapse" id="navbarCollapse">
            <ul class="navbar-nav mr-auto">
               <li class="nav-item active">
                  <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
               </li>
               <li class="nav-item">
                  <a class="nav-link" href="#">About Us</a>
               </li>
               <li class="nav-item">
                  <a class="nav-link" href="#">Service</a>
               </li>
               <li class="nav-item">
                  <a class="nav-link" href="#">Blog</a>
               </li>
               <li class="nav-item">
                  <a class="nav-link" href="#">Contact Us</a>
               </li>
            </ul>
            <form class="form-inline mt-2 mt-md-0">
               <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
               <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
         </div>
      </nav>
   </section>
   <main>
      <section class="mt-5">
         <div class="container pt-lg-md mb-2 pt-5">
            <div class="row no-gutters">
               <div class="col-lg-12 jumbotron mb-0">
                  <h2 class="text-center p-2">
                  Blog Sticky-top on Scroll Effect using in Navbar <br>( creating our Blog-inner page ) 
                  </h2>
               </div>
            </div>
         </div>
      </section>
      <section class="bg-white p-4 mb-4">
         <div class="container">
            <div class="row">
               <div class="col-md-9 col-12">
                  <div class="row row-grid align-items-center mb-3">
                     <div class="col-md-6">
                        <img src="images/malinLogo.png" class="p-3 img-fluid rounded shadow">
                     </div>
                     <div class="col-lg-6 text-left">
                        <h3 class="h3">Create Responsive Image Box Using Css</h3>
                        <p class="">New dummy content ka use nahi kiya gaya hai, yahan proper content ke sath real data add karke show kiya gaya hai.</p>
                     </div>
                  </div>
                  <div class="row row-grid align-items-center mb-3">
                     <div class="col-md-6">
                        <img src="images/malinLogo.png" class="p-3 img-fluid rounded shadow">
                     </div>
                     <div class="col-lg-6 text-left">
                        <h3 class="h3">Create Mobile Responsive Navbar using Html and Css</h3>
                        <p class="">Content placeholder or presents data with basic content.</p>
                     </div>
                  </div>
                  <div class="row row-grid align-items-center mb-3">
                     <div class="col-md-6">
                        <img src="images/malinLogo.png" class="p-3 img-fluid rounded shadow">
                     </div>
                     <div class="col-lg-6 text-left">
                        <h3 class="h3">basic Service Box Design or html css using</h3>
                        <p class="">Proper content ke sath genuine data add kiya gaya hai taaki users clearly read aur dekh saken.</p>
                     </div>
                  </div>
                  <div class="row row-grid align-items-center mb-3">
                     <div class="col-md-6">
                        <img src="images/malinLogo.png" class="p-3 img-fluid rounded shadow">
                     </div>
                     <div class="col-lg-6 text-left">
                        <h3 class="h3">Yahan original content use hua hai jo real data par based hai, koi dummy content include nahi hai.</p>
                     </div>
                  </div>
                  <div class="row row-grid align-items-center mb-3">
                     <div class="col-md-6">
                        <img src="images/malinLogo.png" class="p-3 img-fluid rounded shadow">
                     </div>
                     <div class="col-lg-6 text-left">
                        <h3 class="h3">Create Mobile Responsive Navbar using Html and Css</h3>
                        <p class="">Is layout me dummy content remove karke actual data-driven content add kiya gaya hai.</p>
                     </div>
                  </div>
 
               </div>
               <div class="col-md-3 col-12">
                  <div class="mb-2 sticky-top" style="top: 120px;">
                     <div class="card-body p-1">
                        <h3 class="card-title">Recent post</h3>
                        <div class="row no-gutters mb-2">
                           <div class="col-6 pr-2">
                              <img src="images/malinLogo.png" width="100" class="p-3 img-fluid rounded shadow">
                           </div>
                           <div class="col-6">
                              <p>What is New dammy demo</p>
                           </div>
                        </div>
                        <div class="row no-gutters mb-2">
                           <div class="col-6 pr-2">
                              <img src="images/malinLogo.png" width="100" class="p-3 img-fluid rounded shadow">
                           </div>
                           <div class="col-6">
                              <p>What We have Dammy title</p>
                           </div>
                        </div>
                        <div class="row no-gutters mb-2">
                           <div class="col-6 pr-2">
                              <img src="images/malinLogo.png" width="100" class="p-3 img-fluid rounded shadow">
                           </div>
                           <div class="col-6">
                              <p>The New Dammy title</p>
                           </div>
                        </div>
                        <div class="row no-gutters mb-2">
                           <div class="col-6 pr-2">
                              <img src="images/malinLogo.png" width="100" class="p-3 img-fluid rounded shadow">
                           </div>
                           <div class="col-6">
                              <p>Our Best dammy titles</p>
                           </div>
                        </div>
                        <div class="row no-gutters mb-2">
                           <div class="col-6 pr-2">
                              <img src="images/malinLogo.png" width="100" class="p-3 img-fluid rounded shadow">
                           </div>
                           <div class="col-6">
                              <p>best popular Dammy title</p>
                           </div>
                        </div>
                        <div class="row no-gutters mb-2">
                           <div class="col-6 pr-2">
                              <img src="images/malinLogo.png" width="100" class="p-3 img-fluid rounded shadow">
                           </div>
                           <div class="col-6">
                              <p>Basic Dammy our title</p>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
            <hr>
         </div>
      </section>
   </main>
   <footer class="page-footer pt-0">
      <!--Footer Links-->
      <div class="bg-dark">
      <div class="container pt-4 pb-4 text-center text-md-left">
         <div class="row mt-3 text-white">
            <div class="col-md-4 col-lg-2 col-xl-2 mx-auto mb-4">
               <h6 class="text-uppercase font-weight-bold">
                  <strong>Products</strong>
               </h6>
               <p>Company Title</p>
               <img src="https://codekarnedo.com/malinLogo.png" class="img-fluid">
            </div>
            <div class="col-md-4 col-lg-2 col-xl-2 mx-auto mb-4">
               <h6 class="text-uppercase font-weight-bold">
                  <strong>Quick link</strong>
               </h6>
               <ul class="nav flex-column">
                  <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary text-white">Home</a></li>
                  <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary text-white">About Us</a></li>
                  <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary text-white">Service</a></li>
                  <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary text-white">Blog</a></li>
                  <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary text-white">Contact Us</a></li>
               </ul>
            </div>
            <div class="col-md-4 col-lg-2 col-xl-2 mx-auto mb-4">
               <h6 class="text-uppercase font-weight-bold">
                  <strong>Other Link</strong>
               </h6>
               <ul class="nav flex-column">
                  <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary text-white">Terms and Conditions</a></li>
                  <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary text-white">Privacy Policy</a></li>
                  <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary text-white">User Agreement</a></li>
               </ul>
            </div>
            <div class="col-md-12 col-lg-12 col-xl-12 mx-auto mb-4">
               <div class="footer-copyright py-3 text-center bg-secondary text-white shadow-sm">© Copyright 2025 CKD. All Rights Reserved.</div>
            </div>
         </div>
      </div>
   </footer>
   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>