Highlight active menu item on scroll

Vote count:

0

I am working on an one page navigation with jQuery. What I want is when the user is scrolling, the highlighted menu will be changed. I came up with the following code:

    // Update current item class
    function setActiveListElements(event){
        var windowPos = $(window).scrollTop();

        $('#primary-navwrapper li a[href^="#"]').each(function() { 
            var currentLink = $(this);
            var refElement = $(currentLink.attr("href"));

            if (refElement.position() <= windowPos && refElement.position().top + refElement.height() > windowPos) {
                $('#primary-navwrapper li a').removeClass("current");
                currentLink.addClass("current");
            }
            else{
                currentLink.removeClass("current");
            }
        });
    }



    // Update menu item on scroll
    $(window).scroll(function() {
           // Call function
        setActiveListElements();
    });

   http://ift.tt/1yWv3vC

The problem with this piece of code is that I will receive the error: Uncaught TypeError: Cannot read property 'top' of undefined.

Hope someone has a solution for this.

asked 1 min ago

Caspert

605

Highlight active menu item on scroll