CODEWITHSUNDEEP
javascriptjqueryhtml
Rikard Olsson
Rikard Olsson

Reputation: 869

Active class not toggled when scrolling

I will refer https://startbootstrap.com/template-overviews/scrolling-nav/ as the website

I'm using page-scroll almost exactly they same as they do at the website but I cannot get the <li> tags in my navigation sidebar to be automatically set to active when scrolling down the page. The opposite works just fine - it scrolls smoothly to correct position when clicking on a link.

I've done as said:

Make sure to include the scrolling-nav.js, jquery.easing.min.js, and scrolling-nav.css files. To make a link smooth scroll to another section on the page, give the link the .page-scroll class and set the link target to a corresponding ID on the page.

Sidebar HTML in body

<!-- side navigation -->
<div id="sidebar-wrapper">
    <ul class="sidebar-nav">
        <li class="sidebar-brand">
            <img src="{{ URL::asset('images/pic_for_now.jpg') }}" alt="">
        </li>
        <li>
            <a class="menu-item page-scroll" href="#home">Home</a>
        </li>
        <li>
            <a class="menu-item page-scroll" href="#about">About</a>
        </li>
        <li>
            <a class="menu-item page-scroll" href="#education">Education</a>
        </li>
        <li>
            <a class="menu-item page-scroll" href="#experience">Experience</a>
        </li>
        <li>
            <a class="menu-item page-scroll" href="#portfolio">Portfolio</a>
        </li>
        <li>
            <a class="menu-item page-scroll" href="#contact">Contact</a>
        </li>
        <li class="menu-footer">
            <a href="{{ URL::to('cv') }}"><h6><i class="lnr lnr-download"></i>Download CV</h6></a>
            <span>
                <a href="#">ENGLISH</a>
                <a href="#">SVENSKA</a>
            </span>
        </li>
    </ul>
</div>
<!-- / side navigation -->

And the scrolling-nav.js

$(function() {
    //jQuery for page scrolling feature - requires jQuery Easing plugin
    $('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });

    // Adding active class to corresponding link on click
    $(".sidebar-nav a").on("click", function(){
       $(".sidebar-nav").find(".active").removeClass("active");
       $(this).parent().addClass("active");
    });
});

I've added a click function separately to add the active class but at the website, the <li> tags does get active after it has scrolled to that particular position. But in my case, they'll never get active.

It seams as the website must have some more js code to handle this but it doesn't. Anyone having a clue?

I'm using Blade templating (Laravel/PHP) if you're wondering about the {{ }} syntax

Upvotes: 0

Views: 1714

Answers (1)

fumihwh
fumihwh

Reputation: 1249

Add data-spy="scroll" to your <body>.

scrollspy is included in Bootstrap.

Scrollspy also requires <ul> tag to have Bootstraps nav class e.g.

<ul class="sidebar-nav nav">

Upvotes: 2

Related Questions