JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sticky">

                    
       <p>
       TEST</p>
       
      
                   

        </div><!-- /.row -->
        


a
<br>a
<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a

CSS

/* sticky contact footer*/
.sticky-banner {
    margin: 0;
    padding: 0;
    position: relative;
    top: 0;
    left: -1%;
    background-color: #003b6c;
    height: 80px;
    width: 102%;
    overflow: hidden;
    border-top: 5px solid #fff;
    border-bottom: 5px solid #fff;
}


.fixed {
    position:fixed;
    bottom: 0;
    width: 100%;
    z-index: 100;
    opacity: 0.5;
}

JavaScript

var maxHeight = $(document).height();
    $(window).scroll(function (event) {
        var y = $(this).scrollTop();
        var top = 117;
        var sticky = 100; // sticky + border top/bottom
        console.log(y + " >= " + (maxHeight+sticky));
        if (y >= top) {
            $('.sticky').addClass('fixed');
            console.log(y + " >= " + (maxHeight+sticky));
            if(y >= maxHeight+sticky) {
                //$('.sticky').removeClass('fixed'); 
                $('.sticky').hide();                 
            }
        } else {
            $('.sticky').removeClass('fixed');
        }
    });