<header class="header">
  <h1>CodePen</h1>
</header>
<main></main>

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

body {
  font-family: sans-serif;
  height: 1500px;
}

header {
  align-items: center;
  color: white;
  display: flex;
  height: 60px;
  justify-content: center;
  position: fixed;
  width: 100%;
}

main {
  background-color: dodgerblue;
  height: 100svh;
}

@keyframes change-header-on-scroll {
  to {
    background-color: white;
    box-shadow: 0 0 4px #d4d4d4;
    color: dodgerblue;
  }
}

.header {
  animation: change-header-on-scroll linear forwards;
  /* animation-range: 0 90svh; */
  animation-range-start: 0;
  animation-range-end: 90svh;
  animation-timeline: scroll();
}