JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>

CSS

body { height:3000px; margin:0;}
div { position:fixed; width:100%; height:40px; text-align:center;}

JavaScript

$(window).scroll(function(){
    var sTop = $(this).scrollTop();
    $('div').text(sTop);
    
    if(sTop >= 300){
        $(window).scrollTop(300);
    }else if(sTop > 300){
        $('div').css({'background':'#CCC'});
    }
});