JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bottomMenu"></div>

CSS

body {
    height:1600px;
}
.bottomMenu {
    top:0;
    left:0;
    right:0;
    position: fixed;
    height: 60px;
    border-top: 1px solid #000;
    background: red;
    z-index: 1;
    
    display:block;
    opacity: 0;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}
.bottomMenu.active {
     opacity:1   
}

JavaScript

$(window).scroll(function () {
    var y = $(window).scrollTop();
    
    // if above 300 and doesn't have active class yet
    if (y > 300 && !$('.bottomMenu').hasClass('active')) {
        $('.bottomMenu').addClass('active');
        
    // if below 300 has still has active class
    } else if(y <= 300 && $('.bottomMenu').hasClass('active')) {
        $('.bottomMenu').removeClass('active');
    }
});