Change Active Menu Item on Page Scroll?

Question

As you scroll down the page, the active menu item changes. How is this done?

Answer 1

It's done by binding to the scroll event of the container (usually window).

Quick example:

// Cache selectors var topMenu = $("#top-menu"),     topMenuHeight = topMenu.outerHeight()+15,     // All list items     menuItems = topMenu.find("a"),     // Anchors corresponding to menu items     scrollItems = menuItems.map(function(){       var item = $($(this).attr("href"));       if (item.length) { return item; }     });  // Bind to scroll $(window).scroll(function(){    // Get container scroll position    var fromTop = $(this).scrollTop()+topMenuHeight;     // Get id of current scroll item    var cur = scrollItems.map(function(){      if ($(this).offset().top < fromTop)        return this;    });    // Get the id of the current element    cur = cur[cur.length-1];    var id = cur && cur.length ? cur[0].id : "";    // Set/remove active class    menuItems      .parent().removeClass("active")      .end().filter("[href='#"+id+"']").parent().addClass("active"); });​ 

See the above in action at jsFiddle including scroll animation.

Answer 2

Just check my Code and Sniper and demo link :

    // Basice Code keep it      $(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);             });         });     });  // Use Your Class or ID For Selection       function onScroll(event){         var scrollPos = $(document).scrollTop();         $('#menu-center a').each(function () {             var currLink = $(this);             var refElement = $(currLink.attr("href"));             if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {                 $('#menu-center ul li a').removeClass("active");                 currLink.addClass("active");             }             else{                 currLink.removeClass("active");             }         });     } 

demo live

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

body, html {      margin: 0;      padding: 0;      height: 100%;      width: 100%;  }  .menu {      width: 100%;      height: 75px;      background-color: rgba(0, 0, 0, 1);      position: fixed;      background-color:rgba(4, 180, 49, 0.6);      -webkit-transition: all 0.4s ease;      -moz-transition: all 0.4s ease;      -o-transition: all 0.4s ease;      transition: all 0.4s ease;  }  .light-menu {      width: 100%;      height: 75px;      background-color: rgba(255, 255, 255, 1);      position: fixed;      background-color:rgba(4, 180, 49, 0.6);      -webkit-transition: all 0.4s ease;      -moz-transition: all 0.4s ease;      -o-transition: all 0.4s ease;      transition: all 0.4s ease;  }  #menu-center {      width: 980px;      height: 75px;      margin: 0 auto;  }  #menu-center ul {      margin: 0 0 0 0;  }  #menu-center ul li a{  		padding: 32px 40px;  }  #menu-center ul li {      list-style: none;      margin: 0 0 0 -4px;      display: inline;    }  .active, #menu-center ul li a:hover  {      font-family:'Droid Sans', serif;      font-size: 14px;      color: #fff;      text-decoration: none;      line-height: 50px;  	background-color: rgba(0, 0, 0, 0.12);  	padding: 32px 40px;    }  a {      font-family:'Droid Sans', serif;      font-size: 14px;      color: black;      text-decoration: none;      line-height: 72px;  }  #home {      background-color: #286090;      height: 100vh;      width: 100%;      overflow: hidden;  }  #portfolio {      background: gray;       height: 100vh;      width: 100%;  }  #about {      background-color: blue;      height: 100vh;      width: 100%;  }  #contact {      background-color: rgb(154, 45, 45);      height: 100vh;      width: 100%;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <!--	<div class="container">	--->  			<div class="m1 menu">  			<div id="menu-center">  				<ul>  					<li><a class="active" href="#home">Home</a>    					</li>  					<li><a href="#portfolio">Portfolio</a>    					</li>  					<li><a href="#about">About</a>    					</li>  					<li><a href="#contact">Contact</a>    					</li>  				</ul>  			</div>  			</div>  			<div id="home"></div>  			<div id="portfolio"></div>  			<div id="about"></div>  			<div id="contact"></div>