БЛОГ НА HUSL


Как добавить header когда страница скролится вверх?

Автор вопроса: powerg

Как сделать так что-бы когда скроллим страницу хедер пропадает. Но если он проскролить вверх , хедер снова появляется на любом участке. Спасибо

addWindowScrollEvent = true;
    const header = document.querySelector('header.header');
    const headerShow = header.hasAttribute('data-scroll-show');
    const headerShowTimer = header.dataset.scrollShow ? header.dataset.scrollShow : 500;
    const startPoint = header.dataset.scroll ? header.dataset.scroll : 1;
    let scrollDirection = 0;
    let timer;
    document.addEventListener("windowScroll", function (e) {
        const scrollTop = window.scrollY;
        clearTimeout(timer);
        if (scrollTop >= startPoint) {
            !header.classList.contains('_header-scroll') ? header.classList.add('_header-scroll') : null;
            if (headerShow) {
                if (scrollTop > scrollDirection) {
                    // downscroll code
                    header.classList.contains('_header-show') ? header.classList.remove('_header-show') : null;
                } else {
                    // upscroll code
                    !header.classList.contains('_header-show') ? header.classList.add('_header-show') : null;
                }
                timer = setTimeout(() => {
                    !header.classList.contains('_header-show') ? header.classList.add('_header-show') : null;
                }, headerShowTimer);
            }
        } else {
            header.classList.contains('_header-scroll') ? header.classList.remove('_header-scroll') : null;
            if (headerShow) {
                header.classList.contains('_header-show') ? header.classList.remove('_header-show') : null;
            }
        }
        scrollDirection = scrollTop <= 0 ? 0 : scrollTop;
    });
.header{
   position:fixed;
    height: 100px;
    background: #000;
  width: 100%;
    color: #fff;
  top:0;
}

.header._header-scroll {
  top:-82px;
}
<header data-scroll class="header">Header</header>
<div class="content">
   
    <div class="spacer"></div>
    
    <p>Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст.. Здесь ваш текст.." Многие программы электронной вёрстки и редакторы HTML используют Lorem Ipsum в качестве текста по умолчанию, так что поиск по ключевым словам "lorem ipsum" сразу показывает, как много веб-страниц всё ещё дожидаются своего настоящего рождения. За прошедшие годы текст Lorem Ipsum получил много версий. Некоторые версии появились по ошибке, некоторые - намеренно (например, юмористические варианты).</p>
  <p>Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст.. Здесь ваш текст.." Многие программы электронной вёрстки и редакторы HTML используют Lorem Ipsum в качестве текста по умолчанию, так что поиск по ключевым словам "lorem ipsum" сразу показывает, как много веб-страниц всё ещё дожидаются своего настоящего рождения. За прошедшие годы текст Lorem Ipsum получил много версий. Некоторые версии появились по ошибке, некоторые - намеренно (например, юмористические варианты).</p>
  <p>Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст.. Здесь ваш текст.." Многие программы электронной вёрстки и редакторы HTML используют Lorem Ipsum в качестве текста по умолчанию, так что поиск по ключевым словам "lorem ipsum" сразу показывает, как много веб-страниц всё ещё дожидаются своего настоящего рождения. За прошедшие годы текст Lorem Ipsum получил много версий. Некоторые версии появились по ошибке, некоторые - намеренно (например, юмористические варианты).</p>
  <p>Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст.. Здесь ваш текст.." Многие программы электронной вёрстки и редакторы HTML используют Lorem Ipsum в качестве текста по умолчанию, так что поиск по ключевым словам "lorem ipsum" сразу показывает, как много веб-страниц всё ещё дожидаются своего настоящего рождения. За прошедшие годы текст Lorem Ipsum получил много версий. Некоторые версии появились по ошибке, некоторые - намеренно (например, юмористические варианты).</p>
  <p>Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст.. Здесь ваш текст.." Многие программы электронной вёрстки и редакторы HTML используют Lorem Ipsum в качестве текста по умолчанию, так что поиск по ключевым словам "lorem ipsum" сразу показывает, как много веб-страниц всё ещё дожидаются своего настоящего рождения. За прошедшие годы текст Lorem Ipsum получил много версий. Некоторые версии появились по ошибке, некоторые - намеренно (например, юмористические варианты).</p>
    
        <p>Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст.. Здесь ваш текст.." Многие программы электронной вёрстки и редакторы HTML используют Lorem Ipsum в качестве текста по умолчанию, так что поиск по ключевым словам "lorem ipsum" сразу показывает, как много веб-страниц всё ещё дожидаются своего настоящего рождения. За прошедшие годы текст Lorem Ipsum получил много версий. Некоторые версии появились по ошибке, некоторые - намеренно (например, юмористические варианты).</p>
    
        <p>Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст.. Здесь ваш текст.." Многие программы электронной вёрстки и редакторы HTML используют Lorem Ipsum в качестве текста по умолчанию, так что поиск по ключевым словам "lorem ipsum" сразу показывает, как много веб-страниц всё ещё дожидаются своего настоящего рождения. За прошедшие годы текст Lorem Ipsum получил много версий. Некоторые версии появились по ошибке, некоторые - намеренно (например, юмористические варианты).</p>
</div>


Источник

Ответы (1 шт):

Автор решения: Pr0gramm1st

Если правильно понял, что требуется, то можно попробовать вот так (объяснил, возможно, не совсем хорошо, но как получилось):

const header = document.querySelector('.header');
let scrollPrev = 0; //Значение последней (предыдущей) величины scrollOffset, когда шапка была скрыта/показана
let positionHideHeaderLast = 0; //Значение характеризует ту величину scrollOffset, когда шапку только-только скрыли
window.addEventListener('scroll', () => {
  let scrollOffset = window.pageYOffset;
  
  //Если пролистали странцу на >= 200px и на величину scrollOffset > величины, когда шапку скрывали/показывали
  if (scrollOffset >= 200 && scrollOffset > scrollPrev) {
    header.classList.add('header_hide'); //Скрываем шапку
    positionHideHeaderLast = scrollOffset;
  } else if (scrollOffset <= (positionHideHeaderLast - 100)) { //Если пролистали страницу на величину scrollOffset меньшую или равную, чем последнее значение positionHideHeaderLast, когда шапку только-только скрыли минус 100px (ну чтобы не сразу шапка появлялась)
    header.classList.remove('header_hide'); //Показываем шапку
  }
  
  scrollPrev = scrollOffset;
});
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 1000px;
}

.header {
  position: fixed;
  height: 100px;
  background: #000;
  width: 100%;
  color: #fff;
  top: 0;
}

.header._header-scroll {
  top: -82px;
}

.header_hide {
  display: none;
}

.section {
  height: 500px;
}

.section_style_1 {
  background-color: #eee;
}

.section_style_2 {
  background-color: #ddd;
}

.section_style_3 {
  background-color: #333;
}

.section_style_4 {
  background-color: #222;
}
<header data-scroll class="header">Header</header>
<section class="section section_style_1"></section>
<section class="section section_style_2"></section>
<section class="section section_style_3"></section>
<section class="section section_style_4"></section>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.