Привет! Для реализации скрытия и показа шапки сайта в зависимости от прокрутки страницы, чаще всего используется JavaScript или jQuery, так как CSS сам по себе не может отслеживать событие прокрутки.
Вот пример, как это можно сделать с помощью JavaScript:
1. **HTML**:
```html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Скрытие шапки</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header id="header">
<h1>Моя шапка</h1>
</header>
<main>
<div style="height: 2000px;">Содержимое страницы</div>
</main>
<script src="script.js"></script>
</body>
</html>
```
2. **CSS (styles.css)**:
```css
body {
font-family: Arial, sans-serif;
}
header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 60px;
background-color: #333;
color: white;
display: flex;
align-items: center;
justify-content: center;
transition: top 0.3s; /* Плавный переход */
}
main {
padding-top: 60px; /* Отступ, чтобы содержимое не пряталось под шапкой */
}
```
3. **JavaScript (script.js)**:
```javascript
let lastScrollTop = 0;
const header = document.getElementById('header');
window.addEventListener('scroll', function() {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
if (scrollTop > lastScrollTop) {
// Скроллим вниз
header.style.top = "-60px"; // Высота шапки
} else {
// Скроллим вверх
header.style.top = "0";
}
lastScrollTop = scrollTop;
});
```
### Объяснение кода:
- **HTML**: Создаем простую структуру документа с шапкой и основным содержимым.
- **CSS**: Настраиваем стили для шапки, чтобы она фиксировалась в верхней части страницы и создаем плавный переход для свойства `top`.
- **JavaScript**:
- Сохраняем положение последней прокрутки.
- Добавляем слушатель события `scroll`, который проверяет, скроллим ли мы вниз или вверх, и изменяет положение шапки, соответственно.
Теперь, при прокрутке страницы вниз, шапка будет скрываться, а при прокрутке вверх — появляться.