JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

body {
    height:1600px;
}
.bottomMenu {
    top:0;
    left:0;
    right:0;
    position: fixed;
    border-top: 1px solid #000;
    background: red;
    z-index: 1;
        
    height: 0px;
    overflow:hidden;
    display:block;
    opacity: 0;
   transition: all .25s ease-in-out;
   -moz-transition: all .25s ease-in-out;
   -webkit-transition: all .25s ease-in-out;
}
.bottomMenu.active {
    opacity:1;
    height: 60px;
    background-color: blue;
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg);
    color:white;
    font-size:40px;
}

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');
    }
});