<div id="wrap">
    
    <div id="head">
      <span>Menu</span>
    </div>

    <!-- section -->
    <div class="section section--1" data-section="1">
      <div class="center">
        
        <span>Section #1</span>
        
      </div>
    </div>
    <!--/section -->
    
    <!-- section -->
    <div class="section section--2" data-section="2">
      <div class="center">
        
        <span>Section #2</span>
        
      </div>
    </div>
    <!--/section -->
    
    <!-- section -->
    <div class="section section--3" data-section="3">
      <div class="center">
        
        <span>Section #3</span>
        
      </div>
    </div>
    <!--/section -->

  </div>

html,
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.4;
  color: #555;
  background: #fff;
}

* {
  box-sizing: border-box;
}

#wrap {
  position: relative;
}

.section {
  padding: 100px 40px;
  height: 100vh;

  &--1 {
    background: #ddd;
    color: #000;
  }

  &--2 {
    background: #333;
    color: #eee;
  }
  
  &--3 {
    background: #4637ff;
    color: #fff;
  }
}

#head {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  padding: 30px 40px;
  transition: .3s ease;
  transition-property: color, background;

  &.on-section-1 {
    background: #000;
    color: #fff;
  }
  
  &.on-section-2 {
    background: #fff;
    color: #000;
  }
  
  &.on-section-3 {
    background: #ff0000;
    color: #fff;
  }
}

function treatHead() {
  var $head = $('#head'),
    winScroll = $(window).scrollTop();

  $('[data-section]').each(function () {
    var $section = $(this),
      sectionData = $section.data('section'),
      sectionOffTop = $section.offset().top,
      sectionOffBtm = $section.offset().top + $section.innerHeight();
    
    if(winScroll >= sectionOffTop && winScroll <= sectionOffBtm) {
      $head.attr('class', 'on-section-' + sectionData);
    }

  });
}


$(window).on('load scroll', function () {
  treatHead();
});