Задача зафиксировать меню сверху страницы при скролле вниз.
Во вторых сделаем сриптом плавное перемещение между секциями сайта.
Начнем с создания каркаса в html разметке.
Добавим тег nav для меню с классом top-nav.
Этот класс потом будем добавлять в скрипт фиксации меню.
У меню будут bootstrap классы container и row.
Следующий шаг делаем список с классом 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<header class="top-head" style="background-image: url(img/7.jpg);"> <div class="container"> <div class="row"> <div class="col-md-4">logo</div> <div class="col-md-4">descr</div> <div class="col-md-4">phone</div> </div> </div> </header> <nav id="top-nav"> <div class="container"> <div class="row"> <ul class="list-inline"> <a href="#1"> <li>Главная</li> </a> <a href="#2"> <li>Продукция</li> </a> <a href="#3"> <li>Акции</li> </a> <a href="#4"> <li>Партнеры</li> </a> <a href="#5"> <li>Контакты</li> </a> </ul> </div> </div> </nav> <section id="1"> Главная Далеко-далеко за словесными горами в стране. </section> <section id="2"> Продукция Далеко-далеко за словесными горами в стране. </section> <section id="3"> Акции Далеко-далеко за словесными горами в стране. </section> <section id="4"> Партнеры Далеко-далеко за словесными горами в стране. </section> <section id="5"> Контакты Далеко-далеко за словесными горами в стране. </section> |
Содержание статьи
Стилизуем каркас страницы в main.sass.
Установим расстояние между секциями в min-height: 500px и отделим полоской каждую border-bottom: 1px solid #b641b0.
Для шапки сделаем отступ 100 пикселей height: 100px.
Установим меню серый фон background-color: #c3c3c3.
Для каждого элемента списка li зададим свойства.
- в одну линию display: inline-block.
- Все буквы заглавные text-transform: uppercase.
- Отступы от букв padding: 15px 15px.
- Цвет фиолетовый.
- transition: all .2s плавное изменение цвета при наведении мышкой на пункт меню.
Добавим класс &:hover к элементу списка и зададим синий цвет при наведении background-color: blue, текст будет белый.
Установим обязательные свойства стилей для скрипта фиксации меню
- Высота меню top: 100px.
- Фиксированное положение position: fixed.
- z-index: 10 выше всех.
Код в main.sass.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
header height: 100px color: blue font-size: 60px .top-head section min-height: 500px border-bottom: 1px solid #b641b0 nav background-color: #c3c3c3 ul margin-bottom: 0 a li display: inline-block text-transform: uppercase padding: 15px 15px color: #b641b0 font-weight: bold transition: all .2s &:hover background-color: blue color: #fff #top-nav top: 100px position: fixed z-index: 10 width: 100% |
Скрипт для фиксированного меню.
Зададим переменной высоту шапки var head.
Вторая переменная будет значение var noth, когда не видно шапки, если перешли вниз сайта.
Пишем функцию для скролла scrollTop ().
Задаем переменную mnu и присваиваем ей идентификатор top-nav.
Вторая переменная top.
Теперь вычисляем расстояние от текущей позиции до верхней части страницы и если if (top > head) это расстояние больше, то добавляем свойство к меню mnu.css (top, noth).
После расчетов условий установится фиксированное меню.
Скрипт фиксированного меню в common.js.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$(function() { var head = 100; var noth = 0; $(function(){ var mnu = $('#top-nav'); var top = $(this).scrollTop(); if(top > head){ mnu.css('top', noth); } $(window).scroll(function(){ top = $(this).scrollTop(); if (top+noth < head) { mnu.css('top', (head-top)); } else { mnu.css('top', noth); } }); }); |
Скрипт для плавного скролла до секции.
Добавляем в переменную идентификатор меню #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 для плавного скролла.
|
1 2 3 4 5 6 7 8 |
$(document).ready(function(){ $("#top-nav").on("click","a", function (event) { event.preventDefault(); var id = $(this).attr('href'), top = $(id).offset().top; $('body,html').animate({scrollTop: top}, 2000); }); }); |
Второй способ плавной навигации для landing.