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

P

Psoriaz2021-06-15 12:51:04

css

Psoriaz, 2021-06-15 12:51:04

The site has several sections. The first with a picture, on it the cap should be transparent. The next blocks are colored and the header on them should take the color of the block. How can I achieve this? I wrote a jQuery code to change the header from transparent to the color of the second block, but I think there is a better solution than writing this for each block, but I can't find it...
Code:

JS:

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

CSS:

*,
*::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;
}

HTML:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:[email protected];500;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Jost&display=swap" rel="stylesheet">
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/scripts.js"></script>
    <title>Document</title>
</head>
<body>
    <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>
</body>
</html>

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

A

Alex, 2021-06-15
@Kozack

Add an attribute with a color to each block. Let 's say data-header-bg-color=" ... "
A next, when scrolling, define the target block and take the color for the header from this attribute. So you will have a universal JS that does not depend on the blocks themselves. And you can add/remove/change blocks and the color of the header for them at any time without affecting the JS itself

D

Dmitry Markov, 2021-06-15
@En-Tilza

As an option
Make for each section its own backing for the cap. For an example, you can see on this site an arrow appears on the right and, depending on the color of the section, changes its own (the problem is when one section runs into another ..)