JSFiddle - React, Tailwind, and code Playground

HTML

<div...

CSS

.toolbar {font-weight: bold; position: fixed; background: red; font-size: 20px}
.toolbar2, #yourElement {font-style: italic; position: fixed; background: red}

JavaScript

window.onscroll = function() {
    //alert("scroll event detected! " + window.pageXOffset + " " + window.pageYOffset);
    div = document.getElementById('yourElement');
    if (window.pageYOffset > 100) {
        div.classList.remove("toolbar2");
        div.classList.add('toolbar');
    }
    
    if (window.pageYOffset < 100) {
        div.classList.remove("toolbar");
        div.classList.add('toolbar2');
    }
};