javascript - 如何更改粘性标题的背景

Question

我有一个带有粘性标题的着陆页。

当用户开始滚动并且页面显示 .second-section .header 元素时，应该更改 background-color 属性。怎么做才对？

* {
  box-sizing: border-box;
}

html,
body {
  width: 100vw;
}

body {
  margin: 0;
  overflow-y: scroll;
  overflow-x: hidden;

  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  scroll-padding-top: var(--header-height);
}

:root {
  --header-height: 100px;
}

.header {
  position: sticky;
  top: 0;
  width: 100%;
  height: var(--header-height);

  border-bottom: 1px solid rebeccapurple;
  background-color: burlywood;
}

.main {
}

.section {
  display: flex;
  height: calc(100vh - var(--header-height));
  scroll-snap-align: start;
}

.section__item {
  flex: 1 0 50%;
}

.first-section {
  background-color: aquamarine;
}

.first-section-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.first-section-left__text {
  margin: 0 0 70px 0;
  line-height: 1.5;
}

.first-section-left__button {
  align-self: flex-start;
}

.second-section {
  background-color: azure;
}

.galery {
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
  grid-auto-rows: minmax(80px, auto);
  grid-auto-flow: dense;
}

.galery_item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.galery_item:nth-child(2) {
  grid-row: 2;
}

.galery_item:nth-child(4) {
  grid-column-end: span 3;
  grid-row-end: 3;
}

.galery_item:nth-child(5) {
  grid-column-end: span 3;
}

.galery_item:nth-child(7) {
  grid-column-end: span 4;
}

.galery_item:nth-child(8) {
  grid-column-end: span 3;
}

.galery_item:nth-child(10) {
  grid-row: 3 / span 2;
}

.galery_item:nth-child(11) {
  grid-row: 2;
}

.galery_item:nth-child(9) {
  grid-row: 5;
  grid-column: 5;
}

.galery_item:nth-child(12) {
  grid-column-end: span 3;
}

<header class="header">header</header>
<main class="main">
  <section class="section first-section">
    <div class="section__item first-section-left">
      <p class="first-section-left__text">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci assumenda optio nesciunt deleniti voluptas. Amet ratione, necessitatibus deserunt natus ipsum ea magni debitis minima quod eum. Vel at praesentium magnam.
      </p>
      <button class="first-section-left__button">Button</button>
    </div>
    <div class="section__item galery">
      <div class="galery_item">
        <img src="https://source.unsplash.com/category/nature/" alt="title" />
      </div>
      <div class="galery_item">
        <img src="https://source.unsplash.com/category/buildings/" alt="title" />
      </div>
      <div class="galery_item">
        <img src="https://source.unsplash.com/daily" alt="title" />
      </div>
      <div class="galery_item">
        <img src="https://source.unsplash.com/random" alt="title" />
      </div>
      <div class="galery_item">
        <img src="https://source.unsplash.com/category/nature/weekly" alt="title" />
      </div>
      <div class="galery_item">
        <img src="https://source.unsplash.com/user/erondu/daily" alt="title" />
      </div>
      <div class="galery_item">
        <img src="https://source.unsplash.com/weekly?water" alt="title" />
      </div>
      <div class="galery_item">
        <img src="https://source.unsplash.com/weekly?sun" alt="title" />
      </div>
      <div class="galery_item">
        <img src="https://source.unsplash.com/weekly?flowers" alt="title" />
      </div>
      <div class="galery_item">
        <img src="https://source.unsplash.com/weekly?cars" alt="title" />
      </div>
      <div class="galery_item">
        <img src="https://source.unsplash.com/weekly?car" alt="title" />
      </div>
      <div class="galery_item">
        <img src="https://source.unsplash.com/weekly?boss" alt="title" />
      </div>
    </div>
  </section>
  <section class="section second-section">2</section>
  <section class="section third-section">3</section>
</main>

Codepen

Answer 1

你应该为此使用javascript。这是一个应该可以工作的 JS 函数，带有一个新的 css 类:

window.addEventListener('scroll',detectScroll);

function detectScroll() {
    let section2 = document.querySelector('.second-section');
    let header = document.querySelector('.header');
    if (section2.getBoundingClientRect().bottom > 0 && section2.getBoundingClientRect().top < document.documentElement.clientHeight) {
        header.classList.add('bg-red');
    } else {
        header.classList.remove('bg-red');
    }
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100vw;
}

body {
  margin: 0;
  overflow-y: scroll;
  overflow-x: hidden;

  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  scroll-padding-top: var(--header-height);
}

:root {
  --header-height: 100px;
}

.header {
  position: sticky;
  top: 0;
  width: 100%;
  height: var(--header-height);

  border-bottom: 1px solid rebeccapurple;
  background-color: burlywood;
}

.bg-red {
  background-color: #f86;
}

.main {
}

.section {
  display: flex;
  height: calc(100vh - var(--header-height));
  scroll-snap-align: start;
}

.section__item {
  flex: 1 0 50%;
}

.first-section {
  background-color: aquamarine;
}

.first-section-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.first-section-left__text {
  margin: 0 0 70px 0;
  line-height: 1.5;
}

.first-section-left__button {
  align-self: flex-start;
}

.second-section {
  background-color: azure;
}

.galery {
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
  grid-auto-rows: minmax(80px, auto);
  grid-auto-flow: dense;
}

.galery_item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.galery_item:nth-child(2) {
  grid-row: 2;
}

.galery_item:nth-child(4) {
  grid-column-end: span 3;
  grid-row-end: 3;
}

.galery_item:nth-child(5) {
  grid-column-end: span 3;
}

.galery_item:nth-child(7) {
  grid-column-end: span 4;
}

.galery_item:nth-child(8) {
  grid-column-end: span 3;
}

.galery_item:nth-child(10) {
  grid-row: 3 / span 2;
}

.galery_item:nth-child(11) {
  grid-row: 2;
}

.galery_item:nth-child(9) {
  grid-row: 5;
  grid-column: 5;
}

.galery_item:nth-child(12) {
  grid-column-end: span 3;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <header class="header">header</header>
    <main class="main">
      <section class="section first-section">
        <div class="section__item first-section-left">
          <p class="first-section-left__text">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci
            assumenda optio nesciunt deleniti voluptas. Amet ratione,
            necessitatibus deserunt natus ipsum ea magni debitis minima quod
            eum. Vel at praesentium magnam.
          </p>
          <button class="first-section-left__button">Button</button>
        </div>
        <div class="section__item galery">
          <div class="galery_item">
            <img
              src="https://source.unsplash.com/category/nature/"
              alt="title"
            />
          </div>
          <div class="galery_item">
            <img
              src="https://source.unsplash.com/category/buildings/"
              alt="title"
            />
          </div>
          <div class="galery_item">
            <img src="https://source.unsplash.com/daily" alt="title" />
          </div>
          <div class="galery_item">
            <img src="https://source.unsplash.com/random" alt="title" />
          </div>
          <div class="galery_item">
            <img
              src="https://source.unsplash.com/category/nature/weekly"
              alt="title"
            />
          </div>
          <div class="galery_item">
            <img
              src="https://source.unsplash.com/user/erondu/daily"
              alt="title"
            />
          </div>
          <div class="galery_item">
            <img src="https://source.unsplash.com/weekly?water" alt="title" />
          </div>
          <div class="galery_item">
            <img src="https://source.unsplash.com/weekly?sun" alt="title" />
          </div>
          <div class="galery_item">
            <img src="https://source.unsplash.com/weekly?flowers" alt="title" />
          </div>
          <div class="galery_item">
            <img src="https://source.unsplash.com/weekly?cars" alt="title" />
          </div>
          <div class="galery_item">
            <img src="https://source.unsplash.com/weekly?car" alt="title" />
          </div>
          <div class="galery_item">
            <img src="https://source.unsplash.com/weekly?boss" alt="title" />
          </div>
        </div>
      </section>
      <section class="section second-section">2</section>
      <section class="section third-section">3</section>
    </main>
    <script src="./index.js"></script>
  </body>
</html>