JSFiddle - React, Tailwind, and code Playground

by SpiceLab

HTML

<nav>NAV</nav>
<main>MAIN<!-- Platzhalter erzeugt scrollbare Seite --></main>
<footer>FOOTER</footer>

CSS

* {
        margin:0;
        padding:0;
        box-sizing:border-box
}
nav {
        position:fixed;
        top:0;
        height:80px;
        width:100%;
        padding:20px;
        background:LightBlue
}
nav.scroll {
        background:SteelBlue
}
main {
        padding:100px 20px;
        height:200vh;
        background:LightCyan 
}
footer {
        padding:20px;
        background:LightBlue
}

JavaScript

var navbar = document.querySelector('nav')
  window.onscroll = function() {

  if (window.pageYOffset > 0) {
    navbar.classList.add('scroll')
  } else {
    navbar.classList.remove('scroll')
  }
}