На сайте есть несколько разделов. Первый с картинкой, на нем шапка должна быть прозрачной. Следующие блоки цветные и на них шапка должна принимать цвет блока. Как мне этого добиться? Я написал код на 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>
