CODEWITHSUNDEEP
javascripthtmltwitter-bootstrapscrollnavigation
Alex Murray
Alex Murray

Reputation: 275

Page scrolling active navigation javascript

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.

Upvotes: 0

Views: 4827

Answers (1)

Malith
Malith

Reputation: 980

I think already answered this. check Highlight active menu item on scroll

and this jsfiddle:

// JavaScript Document

// Can also be used with $(document).ready() / $(window).load()
$(document).ready(function(){
  $('body').css('display', 'none');
  $('body').fadeIn(500);

  // An offset to push the content down from the top
  var listElement = $('#primary-navwrapper li');
  var offset = $('#header').outerHeight();



  listElement.find('a[href^="#"]').click(function(event) { 
    // Prevent from default action to intitiate
    event.preventDefault();

    // The id of the section we want to go to.
    var anchorId = $(this).attr("href");

    // Our scroll target : the top position of the
    // section that has the id referenced by our href.
        if (anchorId.length > 1 && $(anchorId).length > 0)
        {
     var target = $(anchorId).offset().top - offset;
        }
        else
        {
         var target = 0;
        }
    //console.log(target);


    $('html, body').animate({ scrollTop: target }, 500, function () {
      //window.location.hash = '!' + id;
      window.location.hash = anchorId;
    });

    setActiveListElements();

  });


       // Update current item class
  function setActiveListElements(event){
    var windowPos = $(window).scrollTop();
    $('#primary-navwrapper li a[href^="#"]').each(function() { 

            var currentLink = $(this);
      if ($(currentLink.attr("href")).length > 0)
                {
                var refElement = $(currentLink.attr("href"));
                if (refElement.position().top <= windowPos && (refElement.position().top + refElement.height() + $("#primary-navwrapper").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();
  });



  $('.backtotop').click(function () {
    $('html, body').animate({ scrollTop: 0}, 1250);
    return false;
  });

});

Upvotes: 1

Related Questions