Как достичь плавного скрытия хедера при опускании страницы?

Question

MysticMonarch

css

Как достичь плавного скрытия хедера при опускании страницы?

Как сделать плавное появление хедера при прокрутке страницы в мобильном браузере, чтобы избежать его резкого появления и смещения контента страницы? Какие изменения нужно внести в код, чтобы достичь желаемого эффекта?

15 ноября 2023 г. 19:04

Ответы на вопрос 1

Похожие вопросы

Answer 1

Для достижения плавного скрытия и появления хедера при прокрутке страницы в мобильном браузере, можно использовать JavaScript и CSS transitions.

1. Добавьте следующий CSS код для хедера:
```css
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  height: 60px;
  transition: transform 0.5s;
  transform: translateY(0);
}
```

2. Добавьте следующий JavaScript код:
```javascript
var prevScrollPos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollPos > currentScrollPos) {
    document.querySelector("header").style.transform = "translateY(0)";
  } else {
    document.querySelector("header").style.transform = "translateY(-100%)";
  }
  prevScrollPos = currentScrollPos;
}
```

Этот JavaScript код прослушивает событие прокрутки страницы и изменяет значение CSS свойства `transform` у хедера в зависимости от направления движения прокрутки.

3. Добавьте следующий CSS код для основного контента страницы:
```css
#content {
  margin-top: 60px;
  /* Значение margin-top должно быть равным высоте хедера */
  transition: margin-top 0.5s;
}
```

4. Добавьте следующий JavaScript код для обновления значения `margin-top` у основного контента страницы:
```javascript
var prevScrollPos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollPos > currentScrollPos) {
    document.querySelector("#content").style.marginTop = "60px";
  } else {
    document.querySelector("#content").style.marginTop = "0";
  }
  prevScrollPos = currentScrollPos;
}
```

Теперь хедер будет плавно скрываться при опускании страницы и появляться при прокрутке вверх, а контент страницы будет плавно смещаться в зависимости от высоты хедера.

Обратите внимание, что вы должны правильно выбрать селекторы `header` и `#content` в зависимости от вашей разметки HTML. Измените значения в CSS коде по своему усмотрению, чтобы соответствовать вашему дизайну.