<div class="header">
  <span>Main</span>
  <span>About us</span>
  <span>Contacts</span>
</div>
<section id="sec1">
</section>
<section id="sec2">
</section>
<section id="sec3">
</section>
<section id="sec4">
</section>
<section id="sec5">
  <h2>THE BIGGEST EVER FOOTER</h2>
</section>

body {
  background: #eee;
  overflow-x: hidden;
  width: 100%;
  height: auto;
}
.header {
  background: grey;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 20px;
  padding: 20px 10px;
  text-align: center;
}
.header span {
  color: #000;
  font-weight: 700;
  margin-left: 30px;
}
.transparent {
  background: transparent;
}
section {
  height: 350px;
}
#sec1 {
  background: red;
}
#sec1 {
  background: #ff6767;
}
#sec2 {
  background: #95ff95;
}
#sec3 {
  background: #60a5ce;
}
#sec4 {
  background: #c38de4;
}
#sec5 {
  background: #ddd;
  text-align: center;
  padding-top: 50px;
}
#sec5 h2 {
  margin: 0;
}

var sec1 = $('#sec1').offset().top;
var sec2 = $('#sec2').offset().top;
var sec3 = $('#sec3').offset().top;
var sec4 = $('#sec4').offset().top;

$(document).scroll(function() {
  var scrollPos = $(document).scrollTop();
  if (scrollPos >= sec1 && scrollPos < sec2) {
    $('.header').removeClass('transparent');
  } else if (scrollPos >= sec2 && scrollPos < sec3) {
    $('.header').addClass('transparent');
  } else if (scrollPos >= sec3 && scrollPos < sec4) {
    $('.header').removeClass('transparent');
  }else if (scrollPos >= sec4) {
    $('.header').addClass('transparent');
  }
});