Как добавить плавность меню + правильность использование флексбокса?

Question

[l55uiz]

Привет всем.
Как добавить плавное появление верхнего меню, когда проскролили его?
Вот код - https://jsfiddle.net/ro6p1d6x/2/
Внизу есть медиа-запросы.

+ У знатоков флекбокса хочу узнать правильно ли я использовал свойства для получения такого вида? Может где-то что-то убрать? (для адаптивки)
User и Cart должны быть справа, Логотип слева, а Навигация слева

Answer 1

[Ankhena]

1. Например, анимируется свойство top.
Для начального положения оно отрицательное, затем 0. Поскольку в первом случае не задается position, то отрицательный top никак не мешает правильному отображению.

2. Угу.
На маленьких экранах можно убирать меню в "бургер" и показывать только при нажатии на него.

Comments

[l55uiz]

Что-то не получается , к сожалению сделать плавность

[Ankhena]

l55uiz: https://jsfiddle.net/7yzomo12/

[l55uiz]

Ankhena W: Огромное спасибо. А как сделать плавное восстановление? А то сейчас при скрорллинге вверх резко панель становится на место

[Ankhena]

l55uiz: что нагуглилось: smartlanding.biz/css-animaciya-pri-skrolle-v-obe-s...