JSFiddle - React, Tailwind, and code Playground

by Artur Stambultsian

HTML

<div id="figure"></div>
<div id="space"></div>

CSS

#figure {
    position: fixed;
    width: 100px;
    height: 100px;
    left: 50%;
    margin: 20px -50px 5000px;
    background: #f00;
    -moz-transform: rotate(45deg); 
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    border-radius: 0px;
    margin-top: 50px;
}
#space {    
    height: 5000px;    
}

JavaScript

var tempScrollTop, currentScrollTop = 0;
jQuery(document).scroll(function(){    
    var i=Number($('#figure').css('border-radius').replace('px',''));       
    var j=Number($('#figure').css('margin-top').replace('px',''));      
        $('#figure').css({'border-radius': (i+5)+'px', 'margin-top': (j+40)+ 'px'});  
});