Заметки кодера сайтов

Вы наверное заметили, что при прокрутке страницы вниз на моем сайте, верхнее меню скрывается, а при прокрутке наверх снова появляется? Давайте создадим подобный блок.

Использовать будем скрипт 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"/>

Вуаля, всё работает. Если конечно не появились конфликты скриптов. Плюс, скорее всего, придется дополнительно редактировать стили под свой сайт.

Если возникли вопросы или предложения, пишите на почту: Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.

Скачать main.css и main.js