JSFiddle - React, Tailwind, and code Playground

by John Doe

HTML

<div id="header">Some text</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dolore quae magni ea veritatis consequuntur consequatur expedita quibusdam quas mollitia pariatur sapiente omnis quisquam vero fugiat voluptatibus inventore deserunt? Ad!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dolore quae magni ea veritatis consequuntur consequatur expedita quibusdam quas mollitia pariatur sapiente omnis quisquam vero fugiat voluptatibus inventore deserunt? Ad!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dolore quae magni ea veritatis consequuntur consequatur expedita quibusdam quas mollitia pariatur sapiente omnis quisquam vero fugiat voluptatibus inventore deserunt? Ad!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dolore quae magni ea veritatis consequuntur consequatur expedita quibusdam quas mollitia pariatur sapiente omnis quisquam vero fugiat voluptatibus inventore deserunt? Ad!</p>

CSS

body{
    height: 1000px;
}
#header {
    background: #ccc;
    color:#000;
    line-height: 40px;
    text-align:center;
    height: 40px;
}
body .fixed-nav {
    position:fixed;
    opacity: 0;
    width: 100%;
    background: #121212 !important;
    color:#fff !important;
}

JavaScript

function navFixed() {

     $(document).on('scroll', function () {
         var scroll = $(this);
         if (scroll.scrollTop() > 10) {
             $('#header').addClass('fixed-nav').animate({
                 opacity: 1
             }, 700)
         } else if (scroll.scrollTop() < 10) {
             $('#header').css({
                 opacity: ""
             }).removeClass()

         }

     })

 }
 navFixed()