Как реализовать выезжающее меню?

Question

[Shuboanator]

Как сделать, что бы меню выезжало из невидимой части экрана(сверху) но не сразу при скроле, а через определенное кол-во пикселей.

Т.е есть 2 меню. одно не фиксированное, а второе выезжающее из невидимой части браузера,после скрола на определенное кол-во пикселей.

Answer 1

[Юрий Лобанов]

codepen.io/iiil/pen/InDbp
примерно так можно

p.s. Лучше менять текущее меню, чем создавать отдельное новое. Но если новое меню абсолютно другое, то мой вариант легко подправить.

Comments

[Shuboanator]

а если во 2ом меню надо логотип добавить? как делать?

[Юрий Лобанов]

@Shuboanator смысл в том, что Вы можете header добавлять класс по скроллу. А остальное - дело css. Например, с классом fixed логотип скрыт, а без него - показывать.

[Shuboanator]

@iiil а как сделать, что бы при возвращении меню убиралось не резко, а плавно так же, как и выезжает.

[Юрий Лобанов]

@Shuboanator в данной реализации так не сделать.

Answer 2

[Roman Zhak]

Используйте событие scroll, затем вычисляйте нужное расстояние.

$( window ).scroll(function() {
 // code 
});