JSFiddle - React, Tailwind, and code Playground

by gRoberts

HTML

<header>
  Your Header
</header>
<div id="body">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A reiciendis magnam quisquam, fugit molestias praesentium totam unde quod aut nesciunt doloribus provident pariatur distinctio eius perspiciatis ab deserunt maiores temporibus!</p>
  <p>Modi quod beatae tempora illum ab fuga molestiae earum dolorem! Natus in, iure quos vitae animi est. Nulla debitis dolor harum, molestias veniam eaque voluptas inventore rerum quo dignissimos amet?</p>
  <p>Officiis praesentium quod cum veniam, harum! Tempore, nemo fugit officia quia doloribus dolores ab, fugiat minima amet numquam. Quisquam iure dignissimos, fugit dicta ipsum. Sit debitis nam eveniet esse temporibus!</p>
  <section>Mid Section</section>
  <p>Qui illum a at numquam voluptas beatae ratione, culpa quibusdam doloribus nulla expedita consectetur maxime fugit perferendis excepturi accusamus nobis dignissimos repellat veritatis, vel. Asperiores quis accusantium id cumque voluptatibus.</p>
  <p>Debitis hic mollitia, itaque nam, magni officia nulla. Possimus et, velit rerum beatae perspiciatis officia voluptatem itaque cumque facilis sit. Repellat assumenda temporibus animi omnis incidunt asperiores autem nemo totam!</p>
  <p>Sequi non soluta ut numquam fugiat dolor doloremque omnis recusandae esse maxime? Illo rerum impedit placeat excepturi totam, ullam et eaque ad, nisi reiciendis sunt animi, dicta soluta accusantium in.</p>
  <p>Voluptate ullam nemo pariatur eius odit voluptates earum aspernatur incidunt obcaecati atque totam deleniti unde possimus nulla consequatur mollitia, quis id aperiam. Adipisci repudiandae, provident enim veritatis quibusdam nostrum porro?</p>
  <section>Mid Section</section>
  <p>Unde rerum fuga, repellat autem quas, quam ab ex. Eveniet accusantium, aliquam obcaecati error nisi repellat consequatur distinctio. Necessitatibus nihil atque labore nesciunt aspernatur, dolore optio veritatis dicta temporibus iure.</p>
  <p>Accusantium...

SCSS

html, body {
  margin: 0;
  padding: 0;
}
header {
  background: #000000;
  color: #FFFFFF;
  text-align: center;
  padding: 1rem 0;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 100;
  
  &.active {
    background: blue;
  }
}
#body {
  margin-top: 50px;
  padding: 1rem;
  
  section {
    background: #000000;
    color: #FFFFFF;
    text-align: center;
    padding: 2rem 0;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
  }
}

JavaScript

window.addEventListener('scroll', function(e) {
	if (window.scrollDebounce) {
  	clearTimeout(window.scrollDebounce);
  }
  window.scrollDebounce = setTimeout(function() {
  	var sections = document.querySelectorAll('#body section'),
    		header = document.querySelector('header'),
        headerRect = header.getBoundingClientRect(),
        headerActive = false;
        
    sections.forEach(function(section) {
    	var rect = section.getBoundingClientRect();

      if(rect.top + rect.height > headerRect.top
        && rect.left + rect.width > headerRect.left
        && rect.bottom - rect.height < headerRect.bottom
        && rect.right - rect.width < headerRect.right) {
				headerActive = true;
      }
    });
    
    header.classList.toggle('active', headerActive);
  }, 10);
});

window.dispatchEvent(new Event('scroll'));