Как сделать фиксированное меню при скролле

В этом уроке поговорим, как сделать нам фиксированное меню при прокрутке страницы. Изначально меню остается прижатым к верху нашего сайта, а затем, при скролле на 150px, наше меню становится фиксированным

1. Создаем наше меню с абсолютным позиционированием
<div class="header">
    <ul>
        <li><a href="#menu1">Menu</a></li>
        <li><a href="#menu2">Menu</a></li>
        <li><a href="#menu3">Menu</a></li>
        <li><a href="#menu4">Menu</a></li>
    </ul>
</div>

2. Задаем стили для меню
header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  padding: 16px 0;
}

.header_fixed {
  display: none;
  position: fixed;
  background: #f8fafd;
  top: 0;
  -webkit-box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.06);
  -moz-box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.06);
  box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.06);
}

3. Подключаем библиотеку jQuery. Пропишите перед закрывающим тегом </body>
<script type="text/jаvascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

4. Ниже нашей библиотеки подключаем наш скрипт для появления фиксированного меню
var header = $(".header"); /* Присваиваем имя для переменной */
$(window).scroll(function() { /* Задаем условие if */
  if ($(this).scrollTop() > 150) { /* Узнаем расстояние в px, когда начинается появление меню */
    header.addClass("header_fixed").slideDown(200); /*Добавляем появление фиксированного меню*/
  } else { /* Если условие не совпадает, то */
    if (header.hasClass("header_fixed")) { /* Применяем проверку класс, которое относится к фиксации */
      header.removeAttr("style").removeClass("header_fixed"); /* Удаляем атрибут style и класс фиксации */
    }
  }
});
Добавить комментарий

Оставить комментарий

Кликните на изображение чтобы обновить код, если он неразборчив