How to add smoothness to the menu + correct use of flexbox?

Question

css

Hi all.
How to make the top menu fade in when scrolled down?
Here is the code - https://jsfiddle.net/ro6p1d6x/2/
There are media queries at the bottom.

+ I want to know from flexbox experts if I used the properties correctly to get this look? Can something be removed somewhere? (for responsiveness)
User and Cart should be on the right, Logo on the left, and Navigation on the left

Answer 1

1. For example, the top property is animated.
For the initial position, it is negative, then 0. Since no position is specified in the first case, a negative top does not interfere with the correct display in any way.
2. Uh-huh.
On small screens, you can hide the menu in the "burger" and show only when you click on it.