JSFiddle - React, Tailwind, and code Playground

by Milan Karagunović

HTML

<header class="default">
    
    <div class="default-cnt">
        Default Content
    </div>
    
    <div class="fixed-cnt">
        Fixed Content
    </div>
    
</header>

CSS

body {
    background: #eee;
    height: 1200px;
    overflow-x: hidden;
}
header {
    width: 100%;
    height: 120px;
    padding: 10px;
    overflow: hidden;
    font-family: Verdana;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 2px;
    text-align: center;
}
.default {
    background: #555;
    color: #fff;
}
.default .fixed-cnt {
    display: none;
}
.fixed {
    background: #01a8e7;
    position: fixed;
    top: 0;
    left: 0;
    color: #000;
}
.fixed .default-cnt {
    display: none;
}

JavaScript

$(function() {
  var header = $('header');
  var headOff = header.offset();
    
  $(window).scroll(function() {
    if($(this).scrollTop() > 120 + headOff.top && header.hasClass('default')) {
      header.fadeOut('fast', function() {
          $(this).removeClass('default').addClass('fixed').fadeIn('fast');
      });
    } 
    else if($(this).scrollTop() <= 120 + header.height() && header.hasClass('fixed')) {
      header.fadeOut('fast', function() {
        $(this).removeClass('fixed').addClass('default').fadeIn('fast');
      });
    }
  });
});