JSFiddle - React, Tailwind, and code Playground

by Cone

HTML

<div class="panel" id="pan">some bullshit here
    <div class="fixme">NOT FIXED</div>
</div>

CSS

* {
    padding:0;
    margin:0;
}
.panel {
    position:fixed;
    padding:10px;
    width:500px;
    height:100px;
    background:#dfdfdf;
    top:-50px;
}
.panelfixed {
    position:fixed;
    padding:10px;
    width:500px;
    height:100px;
    background:#dfdfdf;
    top:0;
}
.fixme {
    cursor:pointer;
    position:absolute;
    bottom:0;
    color:#FFF;
    left:0;
    background:#999;
    padding:10px;
}

JavaScript

$('div#pan').hover(function () {
$(this).stop().animate({top: 0 });
}, function () {
    if ($(this).hasClass('panel')) {
        $(this).stop().animate({
            top: -50
        });
    }
});

$('.fixme').click(function () {
    if ($(this).parent('div').hasClass('panel')) {
        $(this).text('FIXED').parent('div').removeClass('panel').addClass('panelfixed');
    } else {
          $(this).text('NOT FIXED').parent('div').removeClass('panelfixed').addClass('panel');
    }
});