@ilovemaryjane

Как починить эффекта скролла хедера (попиксельное добавление/удаление значения)?

От АПИ скролла уже мозги поплыли ;(

Прошу помощи. Требуется добится такого поведения от хедера при скролле:

1. Изначальное состояние `absolute`. Меняется на `fixed` только когда скролл прокручивается на размер хедера. Это принципиально важно. Это вроде как сделано.
2. Обратно `absolute` становится при прокрутки в самый топ. Это вроде как сделано.
3. При скроллинге наверх, `fixed` должно добавлятся по пикселю, одинаково со скоростью скролла. Это вроде как сделано.

4. А вот тут уже мозг отказывается работать. При скроллинге вниз, когда но не первоначальном, а когда отработал скроллинг вверх, баг. Я не могу понять как вычислять тут значение. Чтобы понятнее - если с самого верха прокрутить вниз, потом прокрутить наверх пока не вылезет хедер (но не до конца самого страницы), и потом опять вниз - можно увидеть мигание. Это кривое вычисление значения, оно превышает предел.
5. Также небольшой баг (но не так важный как п. 4): если обновить страницу (важно!), потом медленно прокрутить хедер примерно наполовину вниз, и потом попробовать вверх - он исчезает. Как бы тут исправить, чтобы все остальное не поломать?
6. И в целом как оптимизировать этот говнокод? Я уверен, что я это криво вычисляю все, но эти скролл ивенты это прямо вообще мучительно.

Огромное спасибо если кто-то глянет на эту лапшу, потмоу что я все...

https://codepen.io/kode88/pen/qQorRZ
  • Вопрос задан
  • 213 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Как-то сложно всё выглядит, даже разбирать лень. Так что вместо "починки" напишем заново.

Смещение хедера всегда и без всяких проверок будем вычислять как предыдущее значение смещения плюс изменение скролла. И ограничим его с помощью Math.min/Math.max (0/минус высота элемента). Применять смещение будем когда position имеет значение fixed.

Установка значения position в зависимости от скролла. Тут три случая: скролл превышает высоту хедера - fixed; скролл равен 0 - absolute; в остальном - без изменений.

Соответственно, вместо пяти свойств достаточно всего двух: смещение хедера и предыдущее значение скролла.

https://jsfiddle.net/dsbj3h4c/
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы