JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">
    1<br>2<br>3<br>4<br>
    5<br>6<br>7<br>8<br>
    9<br>a<br>b<br>c<br>
    d<br>e<br>f<br>g<br>
    
    
    <a href="#header" class="toggle">Click me to reveal the top half of this div</a>
</div>

CSS

#header {
    position: fixed;  /*I would like this div to always be fixed to the top of the browser window*/
    top: -160px;
    left: 0;
    width: 100%;
    height: 340px;
    z-index: 10;
    background: #fce;
}

JavaScript

$('.toggle').click(function(){
        if($("#header").css("top") == "-160px") {
          $("#header").animate({top: "0px"}, 1000);
        } else {
          $("#header").animate({top: "-160px"}, 1000);
        }
        return false;
    });