JSFiddle - React, Tailwind, and code Playground

by Noir Noir

HTML

<header></header>
<section class="black"></section>
<section></section>
<section class="black"></section>
<section></section>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

CSS

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: white;
  border-bottom: 5px solid gray;
}
header.black {
  background: black;
}

section {
  height: 400px;
  background: white;
}
section.black {
  background: black;
}

JavaScript

$(document).ready(function(){
	var sections = $('section'),
  		header = $('header'),
      headerClasses = ['black', 'white'];
	$(window).scroll(function(){
  	var scrollTop = $(window).scrollTop()+header.height();
    // ищем элемент на котором находится header
    sections.each(function(){
    	var offsetTop = $(this).offset().top,
      		offsetBottom = offsetTop + $(this).height();
      if (offsetTop <= scrollTop && offsetBottom >= scrollTop) {
      		header.attr('class', headerClasses[+$(this).is('.black')]);
          return false;
      }
    });
  });
});