Можно ли сделать смену фона при скролле без JS

Question

Для того, чтобы ситуация была понятнее, написал такой код:

body {
  margin: 0;
}

header {
  height: 100px;
  position: sticky;
  top: 10px;
}

header div {
  background-color: #000;
  height: 32px;
  margin: 68px 100px 0 100px;
}

main {
  background-color: #00f;
  height: 5000px;
}

main div {
  background-color: #fff;
  height: 16px;
  margin: 24px 50px;
}

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <header>
      <div></div>
    </header>
    <main>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </main>
  </body>
</html>

Вопрос: можно ли без использования JavaScript сделать так, чтобы при скролле (хотя бы на 1 пиксель) у header'а появлялся красный фон?

Если да, то как?

БЛОГ НА HUSL

Можно ли сделать смену фона при скролле без JS

Ответы (0 шт):