title: How to change active class of the navbar on scroll
body: <p>I tried every js code that I only could find, but nothing works, I don't understand why, I checked console, no mistakes there. Maybe somebody can spot the mistake? Maybe I have to import some files or something else? Somehow code does not see the scroll, only when I click on the link. Is there a way to do it only by Bootstrap maybe? Without using JS?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function () {
      $(document).on("scroll", onScroll);
      
      //smoothscroll
      $('a[href^="#"]').on('click', function (e) {
          e.preventDefault();
          $(document).off("scroll");
          
          $('a').each(function () {
              $(this).removeClass('active');
          })
          $(this).addClass('active');
        
          var target = this.hash,
              menu = target;
          $target = $(target);
          $('html, body').stop().animate({
              'scrollTop': $target.offset().top+2
          }, 500, 'swing', function () {
              window.location.hash = target;
              $(document).on("scroll", onScroll);
          });
      });
  });
  
  function onScroll(event){
      var scrollPos = $(document).scrollTop();
      $('#navbarResponsive a').each(function () {
          var currLink = $(this);
          var refElement = $(currLink.attr("href"));
          if (refElement.position().top &lt;= scrollPos &amp;&amp; refElement.position().top + refElement.height() &gt; scrollPos) {
              $('#navbarResponsive ul li a').removeClass("active");
              currLink.addClass("active");
          }
          else{
              currLink.removeClass("active");
          }
      });
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>a:hover,
  .active a{
    border-bottom: 2px solid ;
    font-weight: bolder;
    border-bottom: 2px solid #0F0F6A;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
   type="image/ico"&gt;
      &lt;link rel="stylesheet" href="assets/css/styles.css" /&gt;
      &lt;script src="assets/js/sweetalert.min.js"&gt;&lt;/script&gt;
      
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="assets/script.js"&gt;&lt;/script&gt;
      &lt;script src="https://smtpjs.com/v3/smtp.js"&gt;&lt;/script&gt;
      &lt;script src='assets/js/bootstrap.min.js'&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="assets/css/bootstrap.min.css"/&gt;
      
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;header&gt;
  &lt;nav class="navbar navbar-expand-lg xl_padding py-4 py-md-4 navbar-light fixed-top shadow p-3 mb-5 bg-white rounded" id='TopNav'&gt;
                  &lt;div class="container-fluid"&gt;
              
                      &lt;button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarResponsive"&gt;
                          &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
                      &lt;/button&gt;
                      &lt;div class="collapse navbar-collapse" id="navbarResponsive"&gt;
                          &lt;ul class="navbar-nav nav m-auto"&gt;
                              &lt;li class="nav-item first active"&gt;
                                  &lt;a class="nav-link gotham" href="#about"&gt;About us &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li class="nav-item"&gt;
                                  &lt;a class="nav-link gotham" href="#calendar"&gt;Calendar&lt;/a&gt;
                              &lt;/li&gt;
  
                              &lt;li class="nav-item"&gt;
                                  &lt;a class="nav-link gotham" href="#feedback"&gt;Feedback&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li class="nav-item"&gt;
                                  &lt;a class="nav-link gotham" href="#photo"&gt;Photo&lt;/a&gt;
                              &lt;/li&gt;
  
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/nav&gt;    
  &lt;/header&gt;      
  &lt;section id='about'&gt;&lt;/section&gt;
  &lt;section id='calendar'&gt;&lt;/section&gt;
  &lt;section id='feedback'&gt;&lt;/section&gt;
  &lt;section id='photo'&gt;&lt;/section&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>