Я пытаюсь динамически настроить фиксированное позиционирование для моего заголовка с помощью JS. Как я могу этого достичь?

Содержание

Вопрос или проблема
Ответ или решение
Как динамически изменять позицию "sticky" для шапки с помощью JavaScript
HTML структура
CSS настройки
JavaScript решение
Исторический контекст и советы
Заключение

Вопрос или проблема

Это мой первый личный проект, и у меня возникают трудности с динамическим изменением прилипающего позиционирования в заголовке с помощью JS. Все, что я хочу сделать, это удалить прилипшее позиционирование, которое я установил в классе head, после того как я прокручу вниз мимо нижней части класса intro. Как я могу добиться этого с помощью JavaScript?

Вот HTML-код для заголовка и секции введения.

<header id="head">
        <div class="title">
            <h1 style="font-size: 2.5rem; margin-left: 10px;">
                Здоровье и благополучие
            </h1>
            <img src="C:\Tech Stack\Website Design\CSS Practicee\Images\download (2).png" style="height: 60px; width: 100px; border: none; object-fit: cover;">
        </div>
        <nav class="navigation">
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Переключить навигацию">
            <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarNav"></div>
            <button type="button" class="btn btn-light" id="search"><i class="bi bi-search" style="font-size: 15px;"></i>Поиск</button>
            <button class="btn btn-primary" id="home">Главная</button>
            <button class="btn btn-success" id="about">О нас</button>
            <button class="btn btn-info" id="services" style="color: white">Услуги</button>
        </div>
        </nav>
    </header>

    <div class="intro" id="intro">
        <h2>Статьи блога о здоровье и благополучии</h2>
        <p>Читайте посты от экспертов Harvard Health Publishing, охватывающие различные темы здоровья и перспективы медицинских новостей.
        </p>
    </div>

Вот CSS

#head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px;
    background-color: #CDFFFC;
    min-height: 150px;
    padding: 15px;
    
}
.sticky {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
    background-color: #CDFFFC;

А вот JavaScript



window.addEventListener('scroll', function() {
    
    const header = document.getElementById('head');
    const introSection = document.getElementById ('intro');

    // Рассчитываем нижнюю позицию секции введения

    const introBottom = introSection.offsetTop + introSection.offsetHeight;

    if(window.scrollY >= introBottom) {
        header.classList.remove('sticky');
    }else {
        header.classList.add('sticky');
    }
});

Просто оберните заголовок и введение в один контейнер. Прилепающий элемент всегда останется дочерним элементом своего контейнера. Таким образом, он уйдет с экрана, как только родительский элемент покинет его.

JS не требуется:

header {
  position: sticky;
  top: 0;
  background-color: blue;
  color: white;
  z-index: 10;
}


main {
  min-height: 500vh;
}

<div>
  <header>Заголовок</header>
  <div id="intro">
    <p>Введение</p>
    <p>Введение</p>
    <p>Введение</p>
  </div>
</div>
<main>
  <p>Дальнейший контент</p>
</main>

Ответ или решение

Как динамически изменять позицию "sticky" для шапки с помощью JavaScript

Вам нужно реализовать динамическое изменение позиции sticky для элемента шапки вашего проекта. Давайте рассмотрим, как это можно сделать на основе вашего текущего HTML и CSS кода. Основной целью будет удаление класса .sticky у элемента header после того, как пользователь прокрутит страницу вниз до конца элемента intro.

HTML структура

Ваш HTML код выглядит следующим образом:

<header id="head">
    <div class="title">
        <h1 style="font-size: 2.5rem; margin-left: 10px;">Health & Wellness</h1>
        <img src="C:\Tech Stack\Website Design\CSS Practicee\Images\download (2).png" style="height: 60px; width: 100px; border: none; object-fit: cover;">
    </div>
    <nav class="navigation">
        <button class="navbar-toggler" type="button">...</button>
        <div class="collapse navbar-collapse" id="navbarNav"></div>
        <button type="button" class="btn btn-light" id="search">Search</button>
        <button class="btn btn-primary" id="home">Home</button>
        <button class="btn btn-success" id="about">About</button>
        <button class="btn btn-info" id="services" style="color: white">Services</button>
    </nav>
</header>

<div class="intro" id="intro">
    <h2>Health & Wellness Blog Articles</h2>
    <p>Read posts from experts at Harvard Health Publishing covering a variety of health topics and perspectives on medical news.</p>
</div>

CSS настройки

Ваш CSS для шапки выглядит следующим образом:

#head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px;
    background-color: #CDFFFC;
    min-height: 150px;
    padding: 15px; 
}

.sticky {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
    background-color: #CDFFFC;
}

JavaScript решение

Теперь перейдем к JavaScript. Вы правильно начали писать функцию, обрабатывающую событие прокрутки. Тем не менее, мы должны немного улучшить вашу функцию, чтобы убедиться, что класс .sticky добавляется и удаляется корректно.

Вот пример исправленного кода:

window.addEventListener('scroll', function() {
    const header = document.getElementById('head');
    const introSection = document.getElementById('intro');

    // Вычисляем нижнюю границу секции intro
    const introBottom = introSection.offsetTop + introSection.offsetHeight;

    // Проверяем положение прокрутки
    if (window.scrollY > introBottom) {
        header.classList.remove('sticky'); // Убираем 'sticky', когда прокрутка ниже intro
    } else {
        header.classList.add('sticky'); // Добавляем 'sticky', когда прокрутка выше intro
    }
});

Исторический контекст и советы

Оптимизация производительности: Ваша функция привязана к событию прокрутки, которое может вызываться часто, что может повлиять на производительность. Рассмотрите возможность использования throttle или debounce для контроля вызовов этой функции.
Комментарии и чтение кода: Убедитесь, что ваш код хорошо документирован. Это облегчает понимание и поддержку вашего проекта в будущем.
Советы по стилю: Подумайте о том, чтобы вынести стили, специфичные для .sticky, в отдельные классы или добавить их напрямую в CSS-файл для лучшего управления стилями.
Проверка кроссбраузерной совместимости: Убедитесь, что ваш код корректно работает во всех современных браузерах, особенно если ваш проект ориентирован на широкий круг пользователей.

Заключение

Ваш запрос на динамическое управление классом .sticky в шапке может быть легко решен с использованием простого JavaScript. Следуя приведенным шагам, вы сможете сделать ваше веб-приложение более интерактивным и улучшить опыт пользователей, когда они взаимодействуют с вашим сайтом. Сосредоточьтесь на оптимизации и подходах к написанию кода, чтобы ваш проект был как эффективным, так и понятным.