JSFiddle - React, Tailwind, and code Playground

HTML

<header id="header">
  Ton header qui scroll
</header>

<section class="content">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic porro laborum eaque amet! Maiores quibusdam optio quam deserunt at, doloribus nisi odit ipsa sit cumque sapiente ullam facilis nesciunt delectus.</div>
  <div>Dolorum praesentium sit labore cupiditate asperiores unde nostrum assumenda non repellat sapiente amet fugit, laboriosam, veniam obcaecati, suscipit aut adipisci ipsam aperiam. Dolorem soluta illum, quos eos facilis provident similique?</div>
  <div>Omnis odit suscipit est accusantium commodi dicta eveniet veniam nulla, ipsum cupiditate blanditiis dignissimos voluptatum dolore laborum nobis, vero voluptate excepturi sapiente. Ea laudantium natus id consequuntur, quo nisi aliquid.</div>
  <div>Reiciendis esse, sint, qui architecto in accusantium dolorem libero nam laboriosam eligendi nihil exercitationem et nesciunt soluta eos placeat omnis repellat rem voluptatem. Eveniet inventore illum deleniti dolorum, iste voluptates.</div>
  <div>Pariatur laudantium voluptatibus nostrum, tenetur in voluptatem. Voluptate excepturi porro, neque libero tenetur animi voluptas ipsam eos, aperiam vero in molestiae, assumenda amet voluptatem similique quae iure commodi quisquam voluptatum!</div>
  <div>Quisquam, nostrum perspiciatis neque fugit est commodi magni harum quas dolores at qui dignissimos recusandae iste totam hic quibusdam excepturi beatae suscipit, delectus modi cumque quaerat sed maiores explicabo quia.</div>
  <div>Illum praesentium vero similique, quidem, veniam suscipit assumenda reiciendis, deleniti non, nisi facere. Necessitatibus hic delectus aspernatur, possimus deserunt quasi voluptas illum nam rem totam facere molestias aperiam sed quaerat.</div>
  <div>Accusamus illo, quo quisquam? Beatae ab, neque asperiores, voluptates, illo, cupiditate maiores dignissimos explicabo provident a est vitae fuga qui. Rem saepe ad placeat temporibus ullam id porro omnis...

CSS

*, *:before, *:after {
  margin: 0;
  padding: 0;
  
  box-sizing: border-box;
}

html, body {
  width: 100vw;
  height: 100vh;
}

body {
  display: flex;
  flex-direction: column;
}

header {
  position: static;
  padding: 15px;
  background-color: darkorange;
  
  /* Pour bien le voir */
  transition: background-color 400ms linear;
}

header.scrolled {
  position: fixed;
  
  top: 0;
  left: 0;
  right: 0;
  
  background-color: forestgreen;
}

header.scrolled + .content {
  margin-top: 50px;
}

.content {
  flex: 1;
}

.content div {
  margin-bottom: 10px;
}

footer {
  padding: 15px;
  background-color: darkcyan;
}

JavaScript

const header = document.getElementById('header')

// J'en fait une fonction pour pouvoir l'appeler au chargement de la page car
// le scoll n'est pas forcément en haut au chargement.
function onWindowScroll(event) {
	if (window.pageYOffset < 46) {
  	header.classList.remove('scrolled')
  } else {
  	header.classList.add('scrolled')
  }
}

window.addEventListener('scroll', onWindowScroll)