Как скрывать или показывать шапку при скролле?

Question

[Anonymous]

Всем привет.
Если мне не изменяет память, то через CSS можно было сделать (скрывать/показывать шапку при скролле)

Может кто напомнить, как это делается?

Comments

[Алексей Уколов]

https://doka.guide/css/position-sticky/
Это вы ищете? Из вопроса непонятно.

[Anonymous]

Алексей Уколов, вроде не совсем то. Я через какие-то стили делал, чтобы при скролле вниз скрывалась шапка. При скролле вверх - появлялась.

[Андрей]

Anonymous, на js

[Евгения]

я тут вот делала
https://codepen.io/EugeniaAntonova/pen/vYbjaxP?edi...

стили
.header {
height:80px;
width:100%;
position:sticky;
top:0;
left:0;
right:0;
z-index: 100;
background-color:rgba(0,0,0,0.3);
box-shadow: 0 10px 15px -5px rgba(0,0,0,.8);
transition: .5s ease transform;
}
скрипт
const header = document.querySelector('.header');

let lastScrollY = 0;
window.addEventListener('scroll', function() {
if (window.scrollY > lastScrollY) {
header.style.transform = 'translateY(-85px)';
} else {
header.style.transform = 'translateY(0px)';
}
lastScrollY = window.scrollY;
});
работает исправно

Answer 1

[Михаил Р.]

Если Вы имеете ввиду не position:sticky (css), то необходимо использовать js - пример.