Войти
Регистрация

Фиксированное верхнее меню при прокрутке

Фиксированное верхнее меню при прокрутке

Здравствуйте, друзья!

В HTML и CSS очень много интересных и сложных, на первый взгляд, решений для сайта можно сделать совершенно просто.

В этой статье я Вас научу делать фиксированное меню для сайта с использованием HTML и CSS, а также в конце статьи покажу еще возможность реализации с помощью jQuery.

Начнем как обычно с разметки страницы. Создадим сразу верхнее меню с помощью списков в HTML, также добавим блок, в который поместим фото и произвольный текст на страницу:

<html>
<head>
</head>
<body>
   <nav>
    <ul class="menu">
      <li>Главная</li>
      <li>О нас</li>
      <li>Контакты</li>
    </ul>
   </nav>
   <div class="content">
      <img src="image.jpg"/>
      <div>Текст страницы сайта</div>
   </div>
</body>
</html>

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

Далее немного стилизуем наше меню с помощью CSS:

body {
   margin: 0;
   padding: 0;
}

.menu {
   background: #30a5db;
   display: block;
   margin: 0;
   overflow: hidden;
   padding: 3px 0;
   position: fixed;
   width: 100%;
   z-index: 1;
}

.menu li {
   border-right: 1px solid #5fc1f0;
   color: #fff;
   cursor: pointer;
   float: left;
   font-family: arial;
   font-weight: 700;
   list-style: none;
   padding: 12px 20px;
   text-transform: uppercase;
}

.menu li:last-child {
   border: none;
}

.menu li:hover {
   background: #2190C3;
}

img {
   float: left;
   margin: 0 10px 0 0;
}

.content {
   position: relative;
   top: 50px;
}

Если вкратце, в CSS мы задали стиль для меню, фиксированное позиционирование, а блоку .content с текстом и картинкой задали относительное позиционирование и сдвинули сверху на 50 пикселей, т.к. без этого наше меню перекрывало бы часть текста с картинкой из-за фиксированного позиционирования.

Рабочий вариант этого решения можете посмотреть по ссылке: смотреть демо

Теперь давайте рассмотрим тo же решение, но с использованием jQuery. Это решение будет заключаться лишь в том, что при скроллинге скрипт будет устанавливать определенный класс нашему меню со стилем, а при возврате в начало страницы удалять его.

В этом решении будет использован тот же список CSS стилей, за исключением этого:

.content {
   position: relative;
   top: 50px;
}

И также нам нужно будет убрать position:fixed у меню .menu и добавить transition:0.3s для плавной анимации.

Для реализации на jQuery не забудьте подключить библиотеку jQuery.

Вставьте эту строку внутри тега <head>:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Далее создадим селектор класса .scroll со стилем в CSS, который мы установим нашему меню при скроллинге, тем самым изменив стиль меню. Поместите его после всех стилей, которые мы написали выше.

.scroll {
   background: #1F93C9;
   box-shadow: 0 2px 2px rgba(0,0,0,0.3);
   padding: 6px 0;
   position: fixed;
   transition: 0.3s;
}

Скрипт, который приведет механизм в действие, а именно задаст новый класс .scroll нашему меню при скроллинге, которое примет дополнительный стиль. Поместите его в начале открывающего тега <body>:

1<script>
2  $(function() {
3    $(window).scroll(function() {
4      var scroll = $(window).scrollTop();
5      if (scroll >= 1) {
6          $('.menu').addClass('scroll');
7      } else {
8          $('.menu').removeClass('scroll');
9      }
10  });
11});
12</script>

Здесь логика скрипта следующая - если расстояние между верхней границей сайта и текущим положением полосы прокрутки больше, либо равно 1 пикселю, то добавляем класс .scroll нашему меню, иначе удаляем.

Результат работы скрипта доступно по ссылке: смотреть демо

С уважением, Самвел Погосов

Рекомендую к изучению мой бесплатный видеокурс по HTML и CSS для начинающих с подробными видеоуроками и заданиями: Перейти к видеокурсу

Комментарии к статье

Бесплатный видеокурс

HTML и CSS для начинающих

Практический и бесплатный курс по основам HTML и CSS для начинающих. С этим курсом Вы сможете изучить базовые понятия верстки и стилей CSS. Курс с практическими уроками и заданиями, все видеоуроки последовательны и увлекательны. Я научу Вас всему, чему научился сам.

Получить курс
Опрос

Для чего Вы изучаете HTML и CSS?