JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content"><div class="box" id="box"><a href="#">Click</a></div></div>

CSS

.box {
    position: relative;
    top: 0;
}
#box {
    width: 100px;
    height: 100px;
    border: 1px solid red;
}
.block {
    position: fixed;
        top: 25px;
}
#content {
    height: 1000px;
}

JavaScript

var text = 'Click';
var text2 = 'Close';
var word;
$("#box").find("a").click(function() {
    word = $("#box").attr("class");
    if(word == 'box') {
        $('#box').removeClass("box").addClass("block");
        $("#box a").html(text2)
    }
    else {
         $('#box').removeClass("block").addClass("box");
         $("#box a").html(text)
    }
});