Вы наверное заметили, что при прокрутке страницы вниз на моем сайте, верхнее меню скрывается, а при прокрутке наверх снова появляется? Давайте создадим подобный блок.
Использовать будем скрипт Headroom.js
Для начала создаем блок, который будет скрываться-появляться:
<header id="header" class="header header--fixed">
А в конце страницы, перед закрывающим тегом body вставляем этот код:
<script src="/js/main.js"></script><script>(function() { var header = document.querySelector("#header"); if(window.location.hash) { header.classList.add("slide--up"); }
new Headroom(header, { tolerance: { down : 10, up : 20 }, offset : 205, classes: { initial: "slide", pinned: "slide--reset", unpinned: "slide--up" } }).init();
}());</script>
Не забываем подключить каскадные таблицы стилей:
<link rel="stylesheet" href="/js/main.css"/>
Вуаля, всё работает. Если конечно не появились конфликты скриптов. Плюс, скорее всего, придется дополнительно редактировать стили под свой сайт.
Если возникли вопросы или предложения, пишите на почту:
