JSFiddle - React, Tailwind, and code Playground

by iii l

HTML

<a href="#">click</a>
<div class="block active"></div>
<div class="wrap"></div>

CSS

a {
    position:fixed;
    left:50px;
    top:0;    
}
.block {
    width:100px;
    height:100px;
    background:red;
    position:fixed;
    right:0;
    top:-200px;
    transition: top 0.5s;
}
.block.active {
    top:0;
}
.wrap {
    background:green;
    width:10px;
    height:5000px;
}

JavaScript

var b = $('.block');
$('a').on('click',function(e){
    b.toggleClass('active');
    e.preventDefault();
});

$(window).on('scroll',function(){
    if ($(this).scrollTop() > 100) {
        b.removeClass('active');
    }
    else {
        b.addClass('active');
    }
});