JSFiddle - React, Tailwind, and code Playground

by Giacomini Federico

HTML

<div id="scroll"> <div>

CSS

#scroll{
    width:300px;
    height:300px;
    left:50%;
    margin-left:-150px;
    position:absolute;
    background:red;
    transition:1s;
}

body{
    width:100%;
    height:5000px;
}

JavaScript

var div = document.getElementById("scroll");

window.addEventListener("scroll",scrollDiv);

function scrollDiv(){
    var target = window.pageYOffset + (window.innerWidth*0.5) - 150 ;
    div.style.top = target+"px";
}

scrollDiv();