Change Menu Class on Scroll

Change class name on click in jQuery

by Faisal Khan Janjua

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header page-scroll">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#top-nav">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse" id="top-nav">
      <ul class="nav navbar-nav navbar-right">
        <li class="active">
          <a href="#portfolio">Portfolio</a>
        </li>
        <li>
          <a href="#about">About</a>
        </li>
        <li>
          <a href="#contact">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<div class="content">
  <section id="portfolio"></section>
  <section id="about"></section>
  <section id="contact"></section>
</div>

CSS

.navbar-default {
  padding: 30px 0;
  transition: padding 0.3s;
}

.navbar-default.navbar-shrink {
  padding: 10px 0;
}

.navbar-default a {
  color: #4D4D4D;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 42px;
  font-weight: 700;
  font-size: 20px;
}

.navbar-default a.brand > img {
  max-width: 70px;
}

.navbar-default a.active {
  color: #2dbccb;
}


.content {
  position: absolute;
  width: 100%;
  height: 100%;
}

.content > section {
  width: 100%;
  height: 100%;
}

#portfolio {
  background: #2dbccb;
}

#about {
  background-color: #eb7e7f;
}

#contact {
  background-color: #415c71;
}

JavaScript

$(document).ready(function () {
  //Smooth scrolling when click to nav
  $('#top-nav > ul > li > a').click(function (e) {
    e.preventDefault();
    var curLink = $(this);
    var scrollPoint = $(curLink.attr('href')).position().top;
    $('body,html').animate({
      scrollTop: scrollPoint
    }, 500);
  })

  $(window).scroll(function () {
    onScrollHandle();
  });

  function onScrollHandle() {
    //Navbar shrink when scroll down
    $(".navbar-default").toggleClass("navbar-shrink", $(this).scrollTop() > 50);

    //Get current scroll position
    var currentScrollPos = $(document).scrollTop();

    //Iterate through all node
    $('#top-nav > ul > li > a').each(function () {
      var curLink = $(this);
      var refElem = $(curLink.attr('href'));
      //Compare the value of current position and the every section position in each scroll
      if (refElem.position().top <= currentScrollPos && refElem.position().top + refElem.height() > currentScrollPos) {
        //Remove class active in all nav
        $('#top-nav > ul > li').removeClass("active");
        //Add class active
        curLink.parent().addClass("active");
      }
      else {
        curLink.parent().removeClass("active");
      }
    });
  }
});