Сегодня небольшой пост с примером, в котором мы создадим фиксированное навигационное меню, которое будет появляться в шапке сайта при прокрутке страницы вниз. Демо доступно для просмотра в песочнице на Codepen, там же можно и поэкспериментировать с кодом.
Для начала создадим простенькую структуру странички. Разместим здесь наше меню, заголовок/название сайта и добавим немного контента в виде Lorem ipsum’а для возможности прокрутки.
Код:
Создадим несколько CSS-классов для чтобы приукрасить страницу и выделить наше меню.
Код:
И самое главном добавим класс fixed, который будет добавлять к нашему меню в js-файле при прокрутке страницы вниз и, соответственно, удаляться при обратной прокрутке в самый верх.
Код:
Теперь займемся частью с javascript кодом, в которой мы будем показывать и скрывать наше меню, используя для этого созданный нами класс fixed.
Код:
$(this).scrollTop() > 150 – обозначает, что наше меню будет появляться после того, как пользователь прокрутит страницу на более чем 150 пикселей вниз.
С помощью jQuery-функций addClass() мы добавляем необходимый класс к элементу с меню и removeClass(), соответственно, удаляет класс.
Пример можно посмотреть на Codepen, там же можно и поэкспериментировать с кодом.
Опубликовано
Подробнее
О сайте
ArtsLab
Блог для тех, кто интересуется разработкой сайтов, веб-дизайном и новыми событиями в интернете. В моем блоге Вы найдете записи на различные околокомпьютерные темы, обзоры сервисов и новинок, статьи по кодингу, советы, скрипты, темы и хаки для wordpress, уроки phostohop и многое другое.