JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div id="header" class="header">
    Hello World
  </div>
</div>

CSS

.container {
    height:2000px;
    width:100%;}

.header{
    text-align:center;
    background-color:#000;
    height:100px;
    position:relative;
    min-height:100px;
    width:100%;
    top:100px;
    color: #fff;
}

JavaScript

$(window).scroll(function () {
    var height = $('body').height();
    var scrollTop = $(window).scrollTop();
    if(scrollTop>100){
        $('#header').css({ 'position': 'fixed', 'top' : '0', 'opacity': '0.7'});
    } else {
         $('#header').css({ 'position': 'relative', 'top': '100px', 'opacity': '1'});
    }
});