JSFiddle - React, Tailwind, and code Playground

HTML

<div id="block"></div>

CSS

body {
    height: 2000px;
    margin: 200px 0 0;
}

#block {
    height: 100px;    
    background: #000;
}

#block.fixed {
    width: 100%;
    position: fixed;
    top: 0;
}

JavaScript

var block = document.getElementById('block');

window.addEventListener('scroll', function() { 
    
    if (document.documentElement.scrollTop > 200 || document.body.scrollTop > 200) {
        block.classList.add('fixed');
    }
    else {
        block.classList.remove('fixed');
    }
    
});