JSFiddle - React, Tailwind, and code Playground

by herrkarlson

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;
});