How To Create a Sticky Navbar | Sticky Top Navbar

 <div class="text">  
     <h2>Sticky navigation bar</h2>  
   </div>  
   <div class="nav">  
     <div class="logo">  
       <a href="#">CWR</a>  
     </div>  
     <ul>  
       <li><a href="#">Home</a></li>  
       <li><a href="#">About</a></li>  
       <li><a href="#">Services</a></li>  
       <li><a href="#">Portfolio</a></li>  
       <li><a href="#">Contact</a></li>  
     </ul>  
   </div>  
   <section>  
   </section>  
   <section>  
   </section>  
   <section>  
   </section>  

There is all the HTML code for the Sticky Top Navbar. Now, you can see an output with Sticky Top Navbar then we write javascript for sticky Top Navbar.

output

CSS code

 body  
 {  
   margin: 0;  
   padding: 0;  
   font-family: arial, sans-serif;  
 }  
 .text{  
   text-align: center;  
   height: 100px;  
   background: #262626;  
   color: #FFF;  
 }  
 .text h2{  
   margin: 0;  
   line-height: 100px;  
   font-size: 48px;  
 }  
 .nav{  
   background: #CA3400;  
   color: #FFF;  
   display: flex  
 }  
 .nav .logo{  
   font-size: 24px;  
   padding: 20px;  
   margin-left: 25px  
 }  
 .nav .logo a{  
   color: #FFF;  
   text-decoration: none  
 }  
 .nav ul{  
   margin: 0;  
   padding: 0;  
   display: flex;  
   width: 50%;  
   margin-left: auto  
 }  
 ul li{  
   padding: 20px;  
   list-style: none  
 }  
 ul li a{  
   color: #FFF;  
   display: block;  
   text-decoration: none;  
   text-transform: uppercase;  
   font-weight: bold  
 }  
 section{  
   height: 300px;  
 }  
 .sticky{  
   position: fixed;  
   top: 0;  
   left: 0;  
   width: 100%  
 }  

Css Updated output

Do you want to learn HTML to React? 🔥

If yes, then here is our Master HTML to React 📚 In this eBook, you’ll Get Complete Free Hand Written Notes on HTML, CSS, JavaScript, and React 💪. It includes 450 Projects with source code. and 250+ Most Asked Interview Questions

Get your eBook now! 👇

Tap Me for eBook ➡️

Javascript(jquery)  code

 cdn link > https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js  
 $(window).scroll(function(){  
       if($(this).scrollTop() > 100){  
         $('.nav').addClass('sticky')  
       } else{  
         $('.nav').removeClass('sticky')  
       }  
     });  

Final output