JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sticky-top">
  <a class="slide-toggle-1"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-J_DEZgNwigQf1LhOzAz8dPFnHovSK1NeM_vQycQ1eDSxM-Z1"></a>
 	<div class="headerbottombar">
		
    <p  style="color:green;text-transform:uppercase;">
            	  	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dolor ante, finibus
    </p>
        <p  style="color:green;text-transform:uppercase;">
ante molestie. Sed elementum, ante eu semper mattis, felis sem tempus turpis, vita
    </p>


	</div>
		<a class="slide-toggle-2"> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGYAAABmCAMAAAAOARRQAAABC1BMVEX////a6cxm2AtZwgD7/vg5egbd7s03fABXuAlbwApQsABo2wxZvQpXvQBLoAdPrABdygBQqQlj0Qvg9M07hABClADc7c1MsABEmgBCiwc5eAbo+d1g0QBRuABZwABOpQhGlAczhQCfxoXE5q2Fs2by9+6B0UqSu3U+jAC14Jluyi3M3sBPlBri69vS8b5KkwCk6HZ7pl5w1xm91K1SkCSb2HV1rFKr3Yyr5IPE17dMjR1/uFus1I5ntjBkuyCOv2+ezH/N5rxdryKMx2bB3q1wskZXox19xk231aF2xj99uVVorjfW4NFwuDR+1DWE4DaX5lploDOqw5m47Za9z7BhljrJ8q9JgR+PsnghggOQAAACZElEQVRoge2WaVPaYBCAX0wggSbcSDgSQA2EiMjh1WpbAYtS6lGt2v//S7pLoENEziQznc4+35jZmYfNuxdjBEEQBEEQBEEQBEEQBPE/wyce7kfcWZimORhxazG0+DnmGWj+WF+T+ABsbeXz+Xg0GuU4TZZVVQyFQpFILFYohBVFSaWKhmFkksmkIAh+fzbrX98z0cTjcbRwQUkSRdGyxArhMHhSxWLRyGQsD2qy62tyrUk2o2Q4yEVV0+k0aKxcIJmUYZQQYZzN68HaGlZvoeYlYSMwZhvxbfsmtFHzur++hbEX1Nzpq4Tqz6Dx/9rEwtgTfrTGCh69CR8t+7iZhfENfJszfmlcBUvg99K4eegNqLT807KwigCazS1Qbg9Q0NHdxUGPJSjo5kpvONfTwu6sLwppQ98IR44s0KWYjhmYH7BfA01mg4axU8dZY+bmWg5hChz5nFoYX8VhU57zUQ5qMG0+fXRsAc8ZDpvjdwtJPwFLqe2CBSjjTDt9z7IHE7q0446F8eDRtOqspWLAJqi4ZIGyLsO+Cc60zw5sAmPPYSlPkzC5oCy9KesbXGsnLlqgrDlNkge2sr7qg+bQVQtsBU2W1OspT6cPe63mvGHecKpJotr7++d9Q1ifNTcaxg5/LMMt0Bv/0oe4pW9ct4DnWhXF9IVl+a6ElZRbDWNHH+ABhWWtn+Nl89UTC2OBAWi6HcZfFtDiYI8tpvMF7rTPuQu8085dLuVpdkU4B7t4Dn5zvGEWUYVzEI/bvqcWxi7TeNzCA3mL3sNsrjy2wL7sRbpetOUMCQ9rjCAIgiAI4t/nD9egSbNzLoRoAAAAAElFTkSuQmCC"></a>

</div>
<div class="content">
  <img...

CSS

.sticky-top{
	position:fixed;
	top:0;
	left:0;
	width:100%;
  background-color:#f4c1d0;
}
.footer{
	position:fixed;
	bottom:0;
	width:100%;
  height:40px;
  background-color:maroon;

}
a.slide-toggle-1,a.lide-toggle-2{
  display:block;
}
.slide-toggle-1 img,.slide-toggle-2 img{
  width:50px;
  height:50px;
}
.slide-toggle-2{
  clear:both;
}
.content{
  background-color:#b7e5ff;
  padding:50px 0;
}

JavaScript

var topHeight;
        function heightCalc(){
         topHeight = $('.sticky-top').height();
       $('.content').css({"margin-top": topHeight+"px"});
     }
     $(document).ready(function () {
            heightCalc();
       $(".slide-toggle-1 ").click(function () {
        $(".headerbottombar").fadeToggle('slow', 'linear', heightCalc);
        });
        $(".slide-toggle-2 ").click(function () {
         $(".headerbottombar").fadeToggle('slow', 'linear', heightCalc);
        });          
    });