Сентябрь 2017
Автор: Рубрика: Верстка Комментариев нет

Фиксируем меню сверху страницы и делаем плавный скролл до блока


Фиксируем меню сверху страницы и делаем плавный скролл до блока

Задача зафиксировать меню сверху страницы при скролле вниз.

Во вторых сделаем сриптом плавное перемещение между секциями сайта.

Начнем с создания каркаса в html разметке.

Добавим тег nav для меню с классом top-nav.

Этот класс потом будем добавлять в скрипт фиксации меню.

У меню будут bootstrap классы container и row.

Следующий шаг делаем список с классом list-inline, прочитать про этот класс можно на официальном сайте bootstrap.

list-inline класс можно на официальном сайте bootstrap.

Добавляем ссылки на секции сайта и пропишем название каждой секции в элементе списка li.

Сделаем пять секций с идентификаторами id=1,2,3,4,5, для проверки фиксированного меню.

Рассмотрим пример, если есть шапка header у сайта высотой height: 100px с изображением на заднем плане style=background-image: url (img/7.jpg) и с тремя колонками для логотипа logo, описания descry сайта и телефона phone.

Получилась разметка в index.html.

Стилизуем каркас страницы в main.sass.

Установим расстояние между секциями в min-height: 500px и отделим полоской каждую border-bottom: 1px solid #b641b0.

Для шапки сделаем отступ 100 пикселей height: 100px.

Перейдем к верхнему меню nav.

Установим меню серый фон background-color: #c3c3c3.

Для каждого элемента списка li зададим свойства.

  • в одну линию display: inline-block.
  • Все буквы заглавные text-transform: uppercase.
  • Отступы от букв padding: 15px 15px.
  • Цвет фиолетовый.
  • transition: all .2s плавное изменение цвета при наведении мышкой на пункт меню.

Добавим класс &:hover к элементу списка и зададим синий цвет при наведении background-color: blue, текст будет белый.

Установим обязательные свойства стилей для скрипта фиксации меню

  1. Высота меню top: 100px.
  2. Фиксированное положение position: fixed.
  3. z-index: 10 выше всех.

Код в main.sass.

Установим обязательные свойства стилей для скрипта фиксации меню

Скрипт для фиксированного меню.

Зададим переменной высоту шапки var head.

Вторая переменная будет значение var noth, когда не видно шапки, если перешли вниз сайта.

Пишем функцию для скролла scrollTop ().

Задаем переменную mnu и присваиваем ей идентификатор top-nav.

Вторая переменная top.

Теперь вычисляем расстояние от текущей позиции до верхней части страницы и если if (top > head) это расстояние больше, то добавляем свойство к меню mnu.css (top, noth).

После расчетов условий установится фиксированное меню.

Скрипт фиксированного меню в common.js.

Скрипт для плавного скролла до секции.

Добавляем в переменную идентификатор меню #top-nav и добавляем функцию клика $(#top-nav).on (click,a).

Затем отменяем стандартный клик по ссылке event.preventDefault ().

Берем у идентификатора атрибут var id = $(this).attr (href).

Вычисляем расстояние до места, куда ведет ссылка top = $(id).offset ().top и делаем переход с анимацией за определенное время, которое можно менять $(body,html).animate ({scrollTop: top}, 2000).

Время в миллисекундах.

Код в common.js для плавного скролла.

Второй способ плавной навигации для landing.

Комментариев нет