Bootstrap 4 scrollspy not working to change active navbar items

Asked 2/9, 2017 at 9:12 Answered 13/5, 2020 at 6:25

Solved jquery html twitter-bootstrap bootstrap-4 scrollspy

I am using Bootstrap 4.0 to create a simple landing page and using ScrollSpy in this page but I am not able to make it work, it does not changing the active menu items.

index.html -

<body>

<!-- Navbar -->
<nav id="main-nav" class="navbar navbar-expand-lg bg-light bg-transparent fixed-top">
    <div class="container">

        <a class="navbar-brand" href="#"><!-- some logo --></a>

        <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 justify-content-end" id="navbarSupportedContent">
            <ul class="navbar-nav">
                <li class="nav-item"><a class="nav-link" href="#header">Home</a></li>
                <li class="nav-item"><a class="nav-link" href="#book">About Book</a></li>
                <li class="nav-item"><a class="nav-link" href="#author">About Author</a></li>
                <li class="nav-item"><a class="nav-link" href="#inspire">Inspire</a></li>
            </ul>
        </div>

    </div>
</nav>

<!-- Header -->
<header id="header" class="header">
    <!-- some content -->
</header>

<!-- About book -->
<section id="book" class="book py-5">
    <!-- some content -->
</section>

<!-- About author -->
<section id="author" class="author py-5">
    <!-- some content -->
</section>

<!-- Inspire -->
<section id="inspire" class="author py-5">
    <!-- some content -->
</section>

<!-- JavaScript -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.min.js"></script>
</body>

I have body{postsition: relative} in my style.css file.

main.js -

$(document).ready(function () {

    // Scroll spy
    $('body').scrollspy({
        target: "#main-nav",
        offset: 70
    });

    // Navbar fade
    changeNavbar();

    $(window).scroll(function () {
        changeNavbar();
    });

    function changeNavbar() {
        var navbar = $("#main-nav");
        if ($(this).scrollTop() >= 100) {
            navbar.addClass("bg-light").removeClass("bg-transparent");
        } else if ($(this).scrollTop() < 100) {
            navbar.removeClass("bg-light").addClass("bg-transparent");
        }
    }
});

I searched a lot but didn't get any solution, already wasted few hours, any help will be appreciated.

Thanks in advance.

Lauer answered 2/9, 2017 at 9:12 Comment(0)

The ScrollSpy component is applying the active class to the nav-item, but you can't see it because you don't have navbar-light class in the navbar.

The Bootstrap 4 CSS selector that applies the style (darker text color) is this:

.navbar-light .navbar-nav .nav-link.active {
  color: rgba(0, 0, 0, 0.9);
}

So, just add the navbar-light class like this:

<nav id="main-nav" class="navbar navbar-expand-lg navbar-light bg-light bg-transparent fixed-top">
</nav>

Demo: https://www.codeply.com/go/ic6Md3e4y1

Blandishments answered 2/9, 2017 at 12:36 Comment(0)

I spent a few days trying to solve this problem! I even set up a separate local website and copied code from W3Schools to build a clean page and couldn't get it to work. I finally tripped across this:

According to bootstrap documentation (https://getbootstrap.com/docs/4.3/components/scrollspy/), "When spying on elements other than the , be sure to have a height set and overflow-y: scroll; applied."

I added this: style="overflow-y: scroll; height: 1500px;" to the same element that has data-spy="scroll" data-target="#myScrollspy" and it started working. The magic one is the overflow-y: scroll. Not setting a height puts a horizontal scrollbar in an ugly place. Having a height of less than your screen height also puts a horizontal scrollbar on it. height: 100% didn't work, either.

Working example is here: http://www.ladybugsrule.net/BootstrapExamples/ScrollSpy.html

Sweepstakes answered 23/10, 2019 at 22:35 Comment(0)

Just add this Jquery code

$(window).scroll(function(){
    $(".nav-item").removeClass("active");
    $(".active").parent().addClass("active");
  })

it will automatically add and remove active class to nav-item with reference to active nav-link

Armes answered 13/5, 2020 at 6:25 Comment(0)

Recommended topics

Hot tags