Page scrolling active navigation javascript

Question

I've got a fixed top navigation and im trying to get the links to change to active when scrolling down the page. Currently i've got it working to a point where if you click it will add an active class and go to the correct position. When you scroll up or down it should change to the previous/next section in the nav which i cant get working. any ideas?

Thanks

html:

<body id="page-top">
    <nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <a href="#page-top"><img src="img/nav-logo.png" id="company-logo-large"></a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right" id="mainmenu">
                    <li>
                        <a class="page-scroll" href="#about">About</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#services">Services</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#team">Team</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

section where nav scrolls to:

<section id="about"></section>
<section id="services"></section>
<section id="team"></section>

javascript:

$(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();
    $('#mainNav a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $('#mainNav li a').removeClass("active");
            currLink.addClass("active");
        }
        else{
            currLink.removeClass("active");
        }
    });
}

Any help would be appreciated.

Answer 1

I think already answered this. check

http://stackoverflow.com/questions/28394485/highlight-active-menu-item-on-scroll

and this

http://jsfiddle.net/8n06pvy9/9/

Page scrolling active navigation javascript

Question

1 answers

solution1
0 ACCPTED 2015-09-24 08:43:55

Page scrolling active navigation javascript

Question

1 answers

solution1 0 ACCPTED 2015-09-24 08:43:55

solution1
0 ACCPTED 2015-09-24 08:43:55