Как добавить header когда страница скролится вверх?
Как сделать так что-бы когда скроллим страницу хедер пропадает. Но если он проскролить вверх , хедер снова появляется на любом участке. Спасибо
snippet
Дополнительно:
Скролим - пропадает. Скролим снизу вверх - появляется.
Но я не уверен, что Вам нужно имеено так, хоть и соответствует описанию, потому что position fixed, который я убрал, просто так в коде не появляется. Если вам нужно как-то иначе - опишите более понятно.
snippet
snippet
- Жалко поттер уже старый, можно было столько всего снять)
- Можно просто смoтреть на deltaY у события wheel (может и у scroll есть).
Если положительное - показывать шапку, если отрицательное - скрывать (или наоборот, не помню).const header = document.querySelector('header'); window.addEventListener('wheel', evt => { if (evt.deltaY < 0) { header.classList.remove('_header-scroll'); } if (evt.deltaY > 0) { header.classList.add('_header-scroll'); } });
const header = document.querySelector('header'); window.addEventListener('wheel', evt => { if (evt.deltaY < 0) { header.classList.remove('_header-scroll'); } if (evt.deltaY > 0) { header.classList.add('_header-scroll'); } });
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для добавления header'а на страницу, когда пользователь скролит вверх, можно использовать JavaScript и CSS. Вот пример решения этой задачи:
1. Создайте HTML разметку для header'а:
```html
Мой заголовок
```
2. Добавьте следующий CSS стиль для header'а:
```css
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #333;
color: #fff;
padding: 10px 0;
transition: top 0.3s;
z-index: 1000;
}
```
3. Используйте JavaScript для проверки направления скролла и показа/скрытия header'а:
```html
let lastScrollTop = 0;
window.addEventListener("scroll", function() {
let currentScroll = window.pageYOffset || document.documentElement.scrollTop;
if (currentScroll > lastScrollTop) {
document.getElementById("header").style.top = "-100px";
} else {
document.getElementById("header").style.top = "0";
}
lastScrollTop = currentScroll <= 0 ? 0 : currentScroll;
});
```
Этот код будет скрывать header при прокрутке вниз и показывать его при прокрутке вверх. Вы можете настроить стили и поведение header'а по вашему усмотрению, чтобы он соответствовал дизайну вашего сайта.
Надеюсь, это поможет вам добавить header, который будет появляться при скролле вверх на вашем сайте!