Задать вопрос
@Keany
javascript

Как реализовать смену стилей шапки сайта при скролле к определенному блоку?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scroll Color Change</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header id="header">
        <!-- Здесь содержимое вашей шапки сайта -->
        <h1>Мой сайт</h1>
    </header>
    <div class="content">
        <!-- Здесь содержимое вашего контента -->
        <div id="target" style="height: 1000px; background-color: lightgray;">
            <h2>Целевой блок</h2>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>


body {
    margin: 0;
    font-family: Arial, sans-serif;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: transparent; /* Изначальный цвет шапки */
    transition: background-color 0.3s ease; /* Анимация смены цвета */
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.content {
    padding-top: 100px; /* Учитываем высоту шапки */
}

h1 {
    margin: 0;
}


document.addEventListener('DOMContentLoaded', function() {
    // Получаем целевой блок
    var targetBlock = document.getElementById('target');
    // Получаем шапку сайта
    var header = document.getElementById('header');

    // Функция для изменения цвета шапки при прокрутке к целевому блоку
    function changeHeaderColor() {
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        const targetOffset = targetBlock.offsetTop;
        const headerHeight = header.offsetHeight;

        if (scrollTop >= targetOffset - headerHeight) {
            header.style.backgroundColor = 'skyblue'; // Изменяем цвет шапки при достижении целевого блока
        } else {
            header.style.backgroundColor = 'transparent'; // Возвращаем изначальный цвет шапки
        }
    }

    // Вызываем функцию при прокрутке страницы
    window.addEventListener('scroll', changeHeaderColor);
});
  • Вопрос задан
  • 244 просмотра
1 комментарий
Подписаться 1 Простой 1 комментарий
Решения вопроса 1
szQocks
@szQocks
Используй IntersectionObserver, его как раз и придумали для подобных задач

код

<header></header>
<div></div>

body{
  height: 1000vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

header{
  height: 100px;
  width: 100%;
  background: blue;
  position: fixed;
  top: 0;
}
div{
  height: 400px;
  width: 100%;
  background: red;
}

const callback = ([ entry ], observer) => {
   const header = document.querySelector('header');
   if(entry.isIntersecting){
     header.style.background = 'aqua';
   } else {
     header.removeAttribute('style');
   }
}
const observer = new IntersectionObserver(callback, { threshold: .4 })

observer.observe(document.querySelector('div'))


демо
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработка мобильного приложения с дополненной реальностью (AR)
21 нояб. 2024, в 20:14
200000 руб./за проект
Внедрить код Roistat
21 нояб. 2024, в 19:31
500 руб./за проект
VPN приложение на IOS
21 нояб. 2024, в 19:28
200000 руб./за проект
Ещё заказы