How to change active class of the navbar on scroll

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?

$(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 <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $('#navbarResponsive ul li a').removeClass("active");
            currLink.addClass("active");
        }
        else{
            currLink.removeClass("active");
        }
    });
}

a:hover,
.active a{
  border-bottom: 2px solid ;
  font-weight: bolder;
  border-bottom: 2px solid #0F0F6A;
}

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 type="image/ico">
    <link rel="stylesheet" href="assets/css/styles.css" />
    <script src="assets/js/sweetalert.min.js"></script>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="assets/script.js"></script>
    <script src="https://smtpjs.com/v3/smtp.js"></script>
    <script src='assets/js/bootstrap.min.js'></script>
    <link rel="stylesheet" href="assets/css/bootstrap.min.css"/>
    
</head>

<body>
<header>
<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'>
                <div class="container-fluid">
            
                    <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarResponsive">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarResponsive">
                        <ul class="navbar-nav nav m-auto">
                            <li class="nav-item first active">
                                <a class="nav-link gotham" href="#about">About us <span class="sr-only">(current)</span></a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link gotham" href="#calendar">Calendar</a>
                            </li>

                            <li class="nav-item">
                                <a class="nav-link gotham" href="#feedback">Feedback</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link gotham" href="#photo">Photo</a>
                            </li>

                        </ul>
                    </div>
                </div>
            </nav>    
</header>      
<section id='about'></section>
<section id='calendar'></section>
<section id='feedback'></section>
<section id='photo'></section>
</body>

Answer

I have changed the jQuery script and updated in below link, please use below link for sample code & output : https://www.kingsubash.com/how-to-change-active-class-of-the-navbar-on-scroll

Not able to paste entire script here so pasted in separate link. On scroll event you can view the sample on the same page.

Advertisement

Answer