How to fixed bootstrap navbar at top on scroll

• Fixed bootstrap navbar at top on scroll using javascript

  <!-- Bootstrap 4 Navbar (HTML) -->
  <div id="navbar_top" class="container-fluied bg-light shadow-sm">
      <div class="container">
          <div class="row">
              <div class="col-md-12">
                  <nav  class="navbar navbar-expand-lg navbar-light bg-light">
                      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                          <span class="navbar-toggler-icon"></span>
                      </button>
                      <div class="collapse navbar-collapse" id="navbarSupportedContent">
                          <ul class="navbar-nav mr-auto">
                              <li class="nav-item">
                                  <a class="nav-link" href="{{ route('allGenerators') }}#html"> HTML   </a>
                              </li>
                              <li class="nav-item"> 
                                  <a class="nav-link" href="{{ route('allGenerators') }}#bootstrap"> Bootstrap   </a>
                              </li>
                              <li class="nav-item"> 
                                  <a class="nav-link" href="{{ route('allGenerators') }}#MySQL"> MySQL  </a>
                              </li>
                              <li class="nav-item">
                                  <a class="nav-link" href="{{ route('allGenerators') }}#laravel"> Laravel  </a>
                              </li>
                              <li class="nav-item">
                                  <a class="nav-link" href="{{ route('allGenerators') }}#codeigniter"> Codeigniter  </a> 
                              </li>
                              <li class="nav-item"> 
                                  <a class="nav-link" href="{{ route('allGenerators') }}#htaccess"> htaccess  </a>
                              </li>
                              <li class="nav-item"> 
                                  <a class="nav-link" href="{{ route('allGenerators') }}#cryptography"> Cryptography & Security  </a>
                              </li>
                              <li class="nav-item"> 
                                  <a class="nav-link" href="{{ route('allGenerators') }}#dummydata"> Dummy data  </a>
                              </li>
                          </ul>
                      </div>
                  </nav>
              </div>
          </div>
      </div>
  </div>
  
  <!-- Javascript -->
  <script>
  document.addEventListener("DOMContentLoaded", function(){
      window.addEventListener('scroll', function() {
          if (window.scrollY > 50) {
              document.getElementById('navbar_top').classList.add('fixed-top');
              // add padding top to show content behind navbar
              navbar_height = document.querySelector('.navbar').offsetHeight;
              document.body.style.paddingTop = navbar_height + 'px';
          } else {
              document.getElementById('navbar_top').classList.remove('fixed-top');
              // remove padding top from body
              document.body.style.paddingTop = '0';
          } 
      });
  });
  </script>
  

  You can fixed bootstrap navbar on scroll in html using bootstrap navbar and javascript

Back to code snippet queries related javascript