JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header"> Header Content </div>

CSS

body {
    margin:0; padding:0;
    height:18000px;
}

#header {
    width: 100%;
    position: fixed;
    z-index:9000;
    overflow: auto;
    height:60px;
    background:#999;
}

.shadow {
    -webkit-box-shadow: 0px 10px 5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 10px 5px rgba(50, 50, 50, 0.75);
    box-shadow:         0px 10px 5px rgba(50, 50, 50, 0.75);
}

JavaScript

var top = $('#header').offset().top;
  $(window).scroll(function (event) {
    var y = $(this).scrollTop(); 
	if (y >= 60) {  $('#header').addClass('shadow'); }
    else { $('#header').removeClass('shadow'); }
  });