0

Есть фильтр на странице, он находится вверху. Нужно когда крутишь страницу вниз его не было, но когда начинаешь крутить вверх, он плавно, со скоростью прокрутки появляется сверху, до тех пор, пока верхняя часть блока не совпадет с верхней частью экрана, и в этом случае она приклеивается. И наоборот, после того, как появилась, когда крутишь вниз, так же плавно уходит вверх за экран и пропадает.

Нашел как сделать резкое появление и скрытие при прокрутке, но так не пойдет.

2
  • Покажите код. На словах сложно догадаться, что вы сделали.
    – user442861
    1 фев в 15:35
  • Вот ссылка на крутую библиотеку michalsnik.github.io/aos
    – Вадим
    2 фев в 21:39

1 ответ 1

0

Описание работы в коде

var header = document.querySelector('header'); // Получаем элемент который будет двигать
var headerHeight = header.offsetHeight; // Берём его высоту для ограничения
var oldScrollY = 0; // Для определения куда идёт направление

window.addEventListener('scroll', function(e) { // При скролле:
  var headerTop = header.getBoundingClientRect().top  - (window.scrollY - oldScrollY); // Получаем значение позиции блока относительно верхней границы вьюпорта
  
  header.style.top = Math.min(Math.max(headerTop, -headerHeight), 0)+'px'; // Меняем параметр top на полученную.
  // Запись Math.min(Math.max()) даёт возможность ограничить движение таким образом, чтобы движение блока было в диапазоне его высоты.
  
  oldScrollY = window.scrollY;
});
body {height: 300vh;}

header {
  background-color: red;
  height: 50px;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
}
<header></header>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.