.header
  .menu
    a(href='#link1').menu-link.active link 1
    a(href='#link2').menu-link link 2
    a(href='#link3').menu-link link 3
    a(href='#link4').menu-link link 4
    a(href='#link5').menu-link link 5
    a(href='#link6').menu-link link 6
.section#link1
.section#link2
.section#link3
.section#link4
.section#link5
.section#link6

.header
  position: fixed
  width: 100%
  padding: 15px 0
  background-color: #fff

.menu
  display: flex
  justify-content: center
  &-link
    font-size: 18px
    padding: 0 8px
    color: black
    text-decoration: none
    &.active
      color: red
    
.section
  height: 100vh
  
#link1
  background: red
  
#link2
  background: blue
  
#link3
  background: green
  
#link4
  background: orange

#link5
  background: yellow
  
#link6
  background: pink
 
  

$('.menu-link').on('click', function(e){
  e.preventDefault();
  let scroll_el = $(this).attr('href'),
      scroll    = $(scroll_el).offset().top;
  
  $('html, body').animate({
    scrollTop: scroll
  }, 300);
});

window.onscroll = (function(){
  let $sections = $('.section');
  $sections.each(function(i,el){
    let top  = $(el).offset().top - 100;
    let bottom = top +$(el).height();
    let scroll = $(window).scrollTop();
    let id = $(el).attr('id');
    if( scroll > top && scroll < bottom){
      $('a.active').removeClass('active');
      $('a[href="#'+id+'"]').addClass('active');
    }
  })
 });