Другой город
Начать проект

Всплывающая фиксированная навигация для сайта JQUERY, CSS. Инструкция и примеры

В этой статье Мы покажем Вам, как сделать так, чтобы шапка сайта выезжала при прокрутке страницы вверх, но при этом скрывалась при прокрутке страницы вниз, чтобы не загораживать нам просмотр самой страницы.

В этой статье Мы покажем Вам, как сделать так, чтобы шапка сайта выезжала при прокрутке страницы вверх, но при этом скрывалась при прокрутке страницы вниз, чтобы не загораживать нам просмотр самой страницы.

Смотреть ДЕМО        Скачать пример

Подготовка к работе

Для начала нам нужна шапка и немного контента для появления прокрутки (scroll). Для этого напишем HTML и CSS-код для примитивной страницы.

HTML:

<!DOCTYPE html>
<html lang="ru">
  <head>
   <meta charset="UTF-8">
   <title>Шапочное волшебство</title>
   <link rel="stylesheet" href="/style.css">
  </head>
  <body>
    <header>
      <div class="container">
        <nav>
          <ul>
            <li><a href="#">О компании</a></li>
            <li><a href="#">Наша деятельность</a></li>
            <li><a href="#">Контакты</a></li>
           </ul>
         </nav>
      </div>
    </header>
    <main>
      <h1>Контент</h1>
    </main>
  </body>
</html>

CSS:

body, h1 {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: normal;
    font-style: normal;
    vertical-align: baseline;
}
.container {
    width: 970px;
    margin: 0 auto;
    padding: 0 15px;
    display: block;
    position: relative;
}
header {
    background: orange;
}
header ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
body {
    background: grey;
    height: 150vh;
}

Стили для реализации задачи

А теперь мы можем приступить к нашей основной задаче, а именно написание кода для смещения шапки. И начнём мы с написания стилей, а дальше перейдём к написанию JS-кода с использованием библиотеки JQuery.

Для начала напишем стили для самой шапки:

header {
	position: fixed;
	left: 0;
	top: 0;
    	background: orange;
	width: 100%;
	-webkit-transition: top 0.4s;
	-moz-transition: top 0.4s;
	-o-transition: top 0.4s;
	transition: top 0.4s;
}

Здесь мы задали шапке фиксированную позицию и позиционировали её относительно левого и верхнего края родительского элемента. Задали ей ширину и кросс-браузерно подключили ей анимацию смещения по свойству «top». Но поскольку мы задали шапке фиксированную позицию, то она выпала из общего потока, и остальная часть страницы прижалась кверху (заехала под шапку). Для этого телу страницы нужно добавить отступ, соответствующий высоте шапки, в нашем случае это 50 пикселей:

body {
    padding-top: 50px;
}

Далее зададим стили для того, чтобы шапка заезжала вверх при прокрутке страницы вниз:

.fixed-header header {
	top: -50px;
}

И возвращалась обратно при прокрутке – вверх:

.fixed-header .show {
	top: 0;
}

На этом стилизация нашей страницы окончена. Но если мы обновим страницу, то видим, что ничего не происходит. Почему же? Всё дело в том, что в нашем HTML-документе нет классов «fixed-header» и «show», которые мы записали в CSS-документ ранее. Но ведь простое добавление классов не поможет нам реализовать нашу задачу. Нам нужно, чтобы данные классы создавались и удалялись при определённых событиях, для это нам и нужен JavaScript, о котором мы говорили ранее

Подключение скриптов

Для реализации данного шага нашей задачи нам нужно подключить стандартную библиотеку JQuery, в нашем случае это версия 3.3.1. JQuery — это замечательный JavaScript Framework, который подкупает своей простотой в понимании и удобством в использовании. Для начала Вам понадобится сам фреймворк, его вы сможете скачать на официальном сайте JQuery. Затем его нужно подключить рядом с подключением CSS-файла следующим способом:

<script src="/js/jquery-3.3.1.min.js"></script>

Далее перейдём к написанию самого кода при помощи вставки тега «script». Как правило, скрипты вставляют в конце тела сайта или же после селектора, в котором они используются:

<script type="text/javascript">
$(document).ready(function(){ //Вызов функции по загрузке интерфейса
  var tempScrollTop, currentScrollTop = $(window).scrollTop(); //объявление переменных и присвоение им значений
  $(window).scroll(function(){ //Вызов функции при прокрутке страницы
    currentScrollTop = $(window).scrollTop(); //присвоение переменной нового значения
      if (currentScrollTop > $('header').height()) { //Проверка условия 'переменная больше высоты шапки'
        $('body').addClass('fixed-header'); // создание класса 'fixed-header' в селекторе 'body'
        if ( tempScrollTop > currentScrollTop ) { //Проверка условия 'значение переменной до вызова функции больше значения после её вызова'
          $('header').addClass('show'); //создание класса 'show' в селекторе 'header'
        } else { // выполнение, если второе условие не прошло проверку
          $('header').removeClass('show'); //удаление класса 'show' в селекторе 'header'
        }
      } else { // выполнение, если первое условие не прошло проверку
        $('body').removeClass('fixed-header'); // удаление класса 'fixed-header' в селекторе 'body'
        $('header').removeClass('show'); //удаление класса 'show' в селекторе 'header'
      }
        tempScrollTop = currentScrollTop; //присвоение одной переменной значение другой
  });
});
</script>

В данном коде мы используем метод библиотеки Jquery «.ready», который выполняет функцию, как только DOM(интерфейс) полностью загрузился. Далее мы добавим ту самую функцию, которая должна выполняться методом. В этой функции мы объявляем переменные и присваиваем им значение, которое нам возвращает метод .scrollTop, .ScrollTop - получает / устанавливает значение отступа прокрутки сверху.

Переменная «tempScrollTop» принимает значение до срабатывания функции методом «.scroll», а переменная «currentScrollTop» – после. После чего, мы добавляем функцию, которая будет вызываться методом «.scroll». Событие «scroll» посылается, когда изменяется положение прокрутки элемента, независимо от причины, будь то щелчок мыши на полосе прокрутки, или перетаскивание полосы прокрутки, перетаскивание внутри элемента, при нажатии клавиш со стрелками, или перемещение с помощью колеса мыши.

Далее мы наполняем эту функцию кодом, в котором задаём переменной currentScrollTop новое значение, полученное уже знакомым нам методом .scrollTop(). На следующей строчке задаём условие, если переменная currentScrollTop больше высоты селектора header (полученного при помощи метода .height()) увеличенного на 5 пикселей, то выполняются строчки кода с 3 по 8( А именно при помощи метода .addClass мы создаём класс у селектора body, после чего проверяется ещё одно условие, которое гласит «если переменная tempScrollTop больше переменной currentScrollTop», то посредством метода .addClass у селектора header создаётся класс show, если это условие не проходит, то посредством метода .removeClass у селектора header удаляется класс show). В противном случае выполняются строчки 10 и 11( которые посредством метода .removeClass удаляют у селектора body класс fixed-header, а у селектора header - класс show). И после выполнения этих условий в конце функции дописываем строку: tempScrollTop = currentScrollTop;, которая присваивает переменной tempScrollTop значение переменной currentScrollTop. Это нужно для того, чтобы сохранять значение переменной tempScrollTop для каждых последующих срабатываний функции методом .scroll.

В итоге наш скрипт принимает вид, предоставленный выше и выполняет все необходимые нам действия.


Выберите город