JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="myDiv"></div>
</div>
<div id="buttons">
    <button id="pin">Pin</button>
    <button id="unpin">unPin</button>
</div>

CSS

#container {
    height: 2000px;
}
#buttons {
    position: fixed;
top:0;    right: 200px;
}
#myDiv {
    margin-top: 50px;
    width: 100px;
    height: 50px;
    background-color: #88a;
}

JavaScript

var pin = document.getElementById('pin');
var unpin = document.getElementById('unpin');
var myDiv = document.getElementById('myDiv');

pin.addEventListener('click', function () {
    myDiv.style.position = 'fixed';
    myDiv.style.top = '50px';
    myDiv.style.marginTop = '0';
});
unpin.addEventListener('click', function () {
    myDiv.style.position = 'block';
});