JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    
    <div id="stuff"></div>
    
    
    <div id="stickyBanner">
        <div class="stickyToggle">
        </div>
        
        <div class="stickyLinks stickyOpen">		
        </div>
    </div> 
    
    <div class="things"></div>
    <div class="otherThings"></div>
    <div class="things"></div>
    <div class="otherThings"></div>
    <div class="things"></div>
    <div class="otherThings"></div>
    <div class="things"></div>
    <div class="otherThings"></div>
    <div class="things"></div>
    <div class="otherThings"></div>
    <div class="things"></div>
    <div class="otherThings"></div>
    <div class="things"></div>
    <div class="otherThings"></div>
    <div class="things"></div>
    <div class="otherThings"></div>
    <div class="things"></div>
    <div class="otherThings"></div>
    <div class="things"></div>
    <div class="otherThings"></div>
</div>

CSS

#container {height: 5000px;}
#stuff {width: 960px; height: 100px; background: #ffe3e3;}
#stickyBanner {width: 960px; z-index: 99999;}
	#stickyBanner .stickyToggle {width: 960px; height: 30px; background: #333333; cursor: pointer;}
	#stickyBanner .stickyLinks {width: 960px; height: 70px; background: #e3e3e3; opacity: 0.5;}

.things {width: 960px; height: 100px; background: #eeff23;}
.otherThings {width: 960px; height: 100px; background: #ef3421;}

JavaScript

$('.stickyToggle').click(function(){

		var $stickyLinks = $('.stickyLinks');

		if ($stickyLinks.hasClass('stickyOpen')) {
			$stickyLinks.animate({height: "0px"});
			$stickyLinks.removeClass('stickyOpen');
		} else {
			$stickyLinks.animate({height: "70px"});
			$stickyLinks.addClass('stickyOpen');
		}
	});

$(document).on( 'scroll', function(){
		if ($(window).scrollTop() > 100) {
			$('#stickyBanner').css({position: "fixed", top: "0px"});
		} else {
			$('#stickyBanner').css({position: "relative", top: "0px"});
		}
	});