JSFiddle - React, Tailwind, and code Playground

HTML

<div id="fixedBox">Меню</div>
<br />
                <script>
                    for (i=1; i<101; i++) document.write('<br />');
                </script>

CSS

body {
    min-height:1600px;
}

#fixedBox{
    width:100%;
    background-color:green;
    position:absolute;
    top:120px;
    height:20px;
}

JavaScript

$(function() {
        
        $( document ).scroll( (function() {
            var doc = $( document );
            var div = $( '#fixedBox' );
            var maxOffset = div.offset().top;

            return function() {
                var docScrollTop = doc.scrollTop();
                
                if ( docScrollTop > maxOffset ) {
                    div.css({ top: docScrollTop });
                }

            }
        }()));
                $(window).scroll(function(){
                    var scrollTop = $(window).scrollTop();
                    if(scrollTop > 120)
                        $('#fixedBox').stop().animate({'opacity':'0.5'},100);
                    else    
                        $('#fixedBox').stop().animate({'opacity':'1'},100);
                });
                
                $('#fixedBox').hover(
                    function (e) {
                        var scrollTop = $(window).scrollTop();
                        if(scrollTop != 0){
                            $('#fixedBox').stop().animate({'opacity':'1'},100);
                        }
                    },
                    function (e) {
                        var scrollTop = $(window).scrollTop();
                        if(scrollTop != 0){
                            $('#fixedBox').stop().animate({'opacity':'0.5'},100);
                        }
                    }
                );        
});