JSFiddle - React, Tailwind, and code Playground

by Bryan Barrera

HTML

<div id="header">
  Header
</div>
<div id="home" class="section">
Home
</div>
<div class="section">
section
</div>
<div class="section">
section
</div>
<div class="section">
section
</div>
<div class="section">
section
</div>

CSS

#header {
  background: red;
  width: 400px;
  margin: 0 auto;
  height: 130px;
  position: fixed;
  top: 0;
}
.fixed {
  background: black !important;
  position: fixed;
  top: 0;
}
#home {
  margin-top:150px;
  background: green;
  height: 2000px;
  width: 400px;
 
}

.section {
  background: yellow;
  height: 200px;
  width: 400px;
}

JavaScript

$(window).scroll(function() {

      var header = $('#header'),
        target = $("#home").offset().top;

      var interval = setInterval(function() {
        if ($(window).scrollTop() > target) {
          // alert("made it!");

          header.addClass('fixed');

          clearInterval(interval);

        } else {

          header.removeClass('fixed');

        }

      }, 250);


    });