JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content"></div>
<div class="fixme">Scroll here</div>

CSS

body { height: 3000px; }
.content { height: 500px; }
.fixme { background: green; color: white; text-align: center; width: 100%; }

JavaScript

var fixmeTop = $('.fixme').offset().top;
var fixmeTopTo = $('.fixme').offset().top+420;
$(window).scroll(function() {
    var currentScroll = $(window).scrollTop();
    console.log(fixmeTop);
    if (currentScroll >= fixmeTop && currentScroll <fixmeTopTo) {
        $('.fixme').css({
            position: 'fixed',
            top: '0',
            left: '0'
        });
    } else {
        $('.fixme').css({
            position: 'static'
        });
    }
});