javascript - 向下滚动页面时如何更改标题的颜色？

Question

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

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

$(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>

标签： javascripthtmljquerycssheader

Answer 1

为了确定标题块是否在任何改变其颜色的块之上，您需要检查标题位置 + 高度是否“触及”元素的顶部边缘。之后，您可以简单地将“触摸”元素的背景颜色应用于您的标题。

$(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>