Change Nav Menu on Scroll

by Faisal Khan Janjua

HTML

<ul class="menu">
  <li><a href="#Home">Home</a></li>
  <li><a href="#About">About</a></li>
  <li><a href="#Contact">Contact</a></li>
</ul>

<div class="section" id="Home"></div>
<div class="section" id="About"></div>
<div class="section" id="Contact"></div>

CSS

* {
  margin:0;
  padding:0;
}
.menu {
  width: 100%;
  position: fixed;
  list-style: none;
  padding: 16px 20px;
  transition: all ease-in-out .3s;
  background: rgba(200,200,200,0.5);
}
.shrink .menu {
  padding: 0 20px;
  background: rgba(200,200,200,0.9);
}
.menu li {
  margin: 0;
  display:inline-block;
}
.menu li a {
  color: #333;
  display: block;
  padding: 8px 20px;
  font-family: 'Arial';
  text-decoration: none;
}
.menu li.active a {
  background: #F0F0F0;
}
.section {
  width:100%;
  height: 100vh;
}
#Home {
  background: #9F9;
}
#About {
  background: #99F;
}
#Contact {
  background: #F9F;
}

JavaScript

jQuery(document).ready(function($){

  $('.menu > li > a').on('click', function (e) {
    e.preventDefault();
    var curLink = $(this);
    var scrollPoint = $(curLink.attr('href'));
    $('body,html').animate({
      scrollTop: scrollPoint.offset().top }, 500);
  })
  
  onScrollHandle();
  $(window).scroll(function () {
    onScrollHandle();
  });
  
  $(window).resize(function(){
  	onScrollHandle();
  });
  
});

function onScrollHandle() {
	$("body").toggleClass("shrink", $(this).scrollTop() > 12);
  var hrefID;
	var scrollPos = $(document).scrollTop();
	$('.menu > li > a').each(function(){
  hrefID = $(this).attr('href');
		if($(hrefID).offset().top <= scrollPos){
			$('.menu > li').removeClass("active");
			$(this).parent().addClass("active");
		}
	});
}