如何在向下滚动页面时更改 header 的颜色？

Question

该站点有几个部分。第一个有图片的，上面header应该是透明的。以下方块是彩色的，它们上面的 header 必须采用方块的颜色。我怎样才能做到这一点？

我编写代码将 header 从透明更改为第二个块的颜色，但我认为有比为每个块编写此代码更好的解决方案，但我找不到。

$(function() {
  let header = $('.header'),
    intro = $('.intro');

  $(window).scroll(function() {
    if ($(this).scrollTop() > intro.outerHeight()) {
      header.addClass('header_filled');
    } else {
      header.removeClass('header_filled');
    }
  });
});

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

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

a {
  text-decoration: none;
}

body {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #fff;
}


/* Animations */


/* Container */

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}


/* Header */

.header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.header__logo {
  font-size: 30px;
  font-weight: 700;
  color: #fff;
}

.header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header_filled {
  background-color: #3ebb46;
  border-radius: 0 0 20px 20px;
  transition: .2s ease-in;
}


/* Intro */

.intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background: url("../img/intro.jpg") center no-repeat;
  background-size: cover;
  font-size: 20px;
}

.intro__inner {
  margin: 0 auto;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border: 1px solid #fff;
  border-radius: 30px;
}

.intro__title {
  font-size: 72px;
  text-align: center;
}

.intro__subtitle {
  font-family: 'Jost', sans-serif;
  text-transform: uppercase;
  font-size: 36px;
  text-align: center;
}


/* Navigation */

.nav {
  display: flex;
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
}

.nav__link {
  color: #fff;
  padding: 0 10px;
}

.nav__link:hover {
  color: #ffffff;
  background-color: #0d7711;
  border-radius: 10px;
}


/* About */

.about {
  background-color: #3ebb46;
  width: 100%;
  height: 100vh;
  padding: 60px 0;
  color: #fff;
  font-size: 20px;
}

.about__title {
  background-color: #61c467;
  text-align: center;
  border-radius: 10px;
}

.about__text {
  text-align: justify;
}

.about__link {
  font-size: 21px;
  font-weight: 700;
  color: #6868d8;
  text-decoration: wavy;
  padding: 0 2px 0 2px;
}

.about__link:hover {
  text-decoration: none;
  color: #3ebb46;
  background-color: #fff;
  border-radius: 5px;
  transition: .1s ease-in;
}


/* Servives */

.services {
  background-color: #48daae;
  width: 100%;
  height: 100vh;
  padding: 60px 0;
  color: #fff;
  font-size: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Jost&display=swap" rel="stylesheet">

<header class="header" id="header">
  <div class="container">
    <div class="header__inner" id="header">
      <a href="#main">
        <div class="header__logo">CottageKarelia</div>
      </a>
      <nav class="nav">
        <a class="nav__link" href="#main">Главная</a>
        <a class="nav__link" href="#about">О компании</a>
        <a class="nav__link" href="#services">Услуги</a>
        <a class="nav__link" href="#">Отдых в Карелии</a>
        <a class="nav__link" href="#">Владельцам</a>
        <a class="nav__link" href="#">Оплата</a>
        <a class="nav__link" href="#">Контакты</a>
      </nav>
    </div>
  </div>
</header>

<div class="intro" id="main">
  <div class="container">
    <div class="intro__inner">
      <h1 class="intro__title">Гостевые дома и коттеджи Карелии</h1>
      <br>
      <h2 class="intro__subtitle">Простой выбор для Вашего отдыха!</h2>
    </div>
  </div>
</div>

<section class="about" id="about">
  <div class="container">
    <div class="about__title">
      <h1>О деятельности компании</h1>
    </div>
    <div class="about__text">
      <p>
        Наш сайт является крупнейшим <a class="about__link" href="catalog.html">каталогом</a> гостевых домов и коттеджей в Карелии, на котором собрано более 1000 позиций. Здесь Вы сможете найти любой дом, соответствующий всем Вашим потребностям. Благодаря
        удобной форме поиска, Вы наиболее полно сможете охарактеризовать, что именно Вам необходимо, после чего, Вам будут представлены наиболее подходящие дома. Когда Вы определитесь с выбором дома, Вам будет предложено забронировать его, после чего
        и начнется Ваш отдых! Кроме того, мы с радостью предлагаем гостям Карелии различные <a href="tours.html" class="about__link">туры</a>, созданные для абсолютно любой категории людей.
      </p>

      <p>
        Наши менеджеры свяжутся с Вами и узнают все Ваши пожелания, после чего они сформируют Вам тур: определят наиболее предпочтительные и удобные варианты проезда, сообщат о дополнительных возможностях на территории выбранного места или тура, посоветуют достопримечательности
        Карелии, которые можно будет посетить неподалеку от выбранного дома, предложат Вам трансфер с вокзала к гостевому дому или коттеджу и обратно. Иными словами, за Вас сделают все и обеспечат Вам лучший отдых на земле в райском уголке, по имени Карелия!
      </p>
    </div>
  </div>
</section>

<section class="services" id="services">
  <div class="container">
    <div class="services__title">
      <h1>Дополнительные услуги</h1>
    </div>
  </div>
</section>

Answer 1

为了确定 header 方块是否在任何改变颜色的方块上方，您需要检查 header 位置 + 高度是否“触及”了方块的顶部边缘元素。之后，您只需将“touched”元素的背景颜色应用到您的 header.

$(window).scroll(function(){
    var $header = $(".header");

    var header_position = $header.offset().top;
    var header_height = $header.outerHeight();

    $('.header-color').each(function(){

        var color_block_position = $(this).offset().top;

        if (header_position + header_height >= color_block_position) {
            $header.css({
                'background-color': $(this).css('background-color')
            });
        }
    });
});

.header {
  background-color: #CECECE;
  font-size: 2em;
  padding: 1em;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  border: 1px solid red;
}
.header-color {
  padding: 1em;
  border: 1px solid red;
}

.transparent-background {
  background-color: transparent;
}

.yellowgreen-background {
  background-color: yellowgreen;
}

.orangered-background {
  background-color: orangered;
}

.blue-background {
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">
  HEADER
</div>
<br><br><br><br><br><br><br>
<div class="header-color transparent-background">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div class="header-color yellowgreen-background">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>

<div class="header-color orangered-background" >
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>

<div class="header-color blue-background">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

如何在向下滚动页面时更改 header 的颜色？

How to change the color of the header when scrolling down the page?

html

javascript

css

jquery

header