@Psoriaz

Как менять цвет шапки при прокручивании страницы?

На сайте есть несколько разделов. Первый с картинкой, на нем шапка должна быть прозрачной. Следующие блоки цветные и на них шапка должна принимать цвет блока. Как мне этого добиться? Я написал код на JQuery, чтобы шапка менялась с прозрачной на цвет второго блока, но вот мне кажется есть решение получше, чем писать так для каждого блока, однако я не могу его найти...
Код:

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:wght@400;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>
  • Вопрос задан
  • 67 просмотров
Пригласить эксперта
Ответы на вопрос 2
Kozack
@Kozack Куратор тега CSS
Thinking about a11y
Добавьте в каждый блок атрибут с цветом. Скажем data-header-bg-color=" ... "
А далее при скролле определяйте целевой блок и берите цвет для шапки из этого атрибута. Так у вас будет универсальный JS, который не зависит от самих блоков. И вы в любой момент сможете добавлять/удалять/изменять блоки и цвет шабки для них при этом не затрагивая собственно сам JS
Ответ написан
Как вариант
Сделать для каждой секции свою подложку для шапки. На примере можно посмотреть на этом сайте с права появляется стрелка и в зависимости от цвета секции меняет свой (проблема когда одна секция наезжает на другую..)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы