<div class="site">
  <div class="menu-wrapper">
    <ul class="menu">
      <li class="menu-item"><a href="#home" class="is-active">Home</a></li>
      <li class="menu-item"><a href="#portfolio">Portfolio</a></li>
      <li class="menu-item"><a href="#about">About</a></li>
      <li class="menu-item"><a href="#contact">Contact</a></li>
    </ul>
  </div>

  <div id="home">Home</div>
  <div id="portfolio">Portfolio</div>
  <div id="about">About</div>
  <div id="contact">Contact</div>
</div>

body {
  font-family: sans-serif;
  font-size: 20px;
}

.site {
  /* padding-top: 40px; */
  /* padding-bottom: 100px; */
}

.menu-wrapper {
  width: 100%;
  background-color: #afafaf;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 40px;
}

.menu {
  margin: 0 auto;
  max-width: 960px;
  list-style-type: none;
  text-align: center;
}

.menu li {
  display: inline-block;
}

.menu li a {
  color: #fff;
  display: block;
  padding: 10px 20px;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

.menu li a:hover,
.menu li a.is-active {
  color: red;
}

#home,
#portfolio,
#about,
#contact {
  height: 1000px;
  padding-top: 200px;
  text-align: center;
  /* margin-bottom: 200px; */
}

#home {
  background-color: #efefef;
}

#portfolio {
  background-color: #44ffff;
}

#about {
  background-color: #ff44ff;
}

#contact {
  background-color: #ffff44;
}

$(document).ready(function() {
  $(document).on('scroll', onScroll);
  
  //smoothScroll
  $('.menu a[href^="#"]').on('click', function(event) {
    event.preventDefault();
    $(document).off('scroll');
    
    $('.menu a').each(function() {
      $(this).removeClass('is-active');
    });
    
    $(this).addClass('is-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 a').each(function() {
    var currLink = $(this),
        refElement = $(currLink.attr('href'));
    
    if(refElement.position().top <= scrollPos && refElement.position().top + refElement.outerHeight() > scrollPos) {
      $('.menu a').removeClass('is-active');
      currLink.addClass('is-active');
    }
    else {
      currLink.removeClass('is-active');
    }
    
  });
}