Навигационное меню для лендинга с плавным скроллом и подсветкой точек активной секции. Меню реализовано с использованием библиотеки jQuery.
Пример:
HTML:
<nav>
<ul>
<li><a href="#section-1">Секция 1</a></li>
<li><a href="#section-2">Секция 2</a></li>
<li><a href="#section-3">Секция 3</a></li>
<li><a href="#section-4">Секция 4</a></li>
<li><a href="#section-5">Секция 5</a></li>
</ul>
</nav>
<header>Шапка</header>
<section id="section-1">Секция 1</section>
<section id="section-2">Секция 2</section>
<section id="section-3">Секция 3</section>
<section>Секция без пункта меню</section>
<section id="section-4">Секция 4</section>
<section id="section-5">Секция 5</section>
<footer>Подвал</footer>
<ul>
<li><a href="#section-1">Секция 1</a></li>
<li><a href="#section-2">Секция 2</a></li>
<li><a href="#section-3">Секция 3</a></li>
<li><a href="#section-4">Секция 4</a></li>
<li><a href="#section-5">Секция 5</a></li>
</ul>
</nav>
<header>Шапка</header>
<section id="section-1">Секция 1</section>
<section id="section-2">Секция 2</section>
<section id="section-3">Секция 3</section>
<section>Секция без пункта меню</section>
<section id="section-4">Секция 4</section>
<section id="section-5">Секция 5</section>
<footer>Подвал</footer>
CSS:
В данном примере предусмотрена возможность выделять не только пункт меню видимой секции, но и ее саму, используя класс section.active
nav {
height: 80px;
position: fixed;
top: 0;
left: 0;
background: #337AB7;
width: 100%;
font-family: Verdana, sans-serif;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
height: 80px;
}
nav ul li {
margin: 0 10px;
}
nav ul li a {
color: #BFE2FF;
display: inline-flex;
font-size: 18px;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
transition: all 0.3s ease;
border-bottom: 2px solid transparent;
}
nav ul li a:hover {
color: #FFF;
}
nav ul li a.active {
border-bottom: 2px solid #FFF;
padding-bottom: 6px;
color: #FFF;
}
section,
header,
footer {
background: #fff;
border-bottom: 4px solid #337AB7;
height: 600px;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
font-size: 40px;
text-transform: uppercase;
color: #337AB7;
font-weight: bold;
font-family: Verdana, sans-serif;
}
section:nth-child(even) {
background: #BFE2FF;
}
section:first-child {
margin-top: 60px;
}
section.active {
/* Стиль для активной секции */
}
header,
footer {
height: 400px;
background: #337AB7;
color: #FFF;
}
jQuery:
180 в настоящее время коде - это достижение значимости, позволяющее переключаться на создание секции немного раньше, чем она дойдет до фиксированного меню.
let sections = $('section'),
nav = $('nav'),
nav_height = nav.outerHeight();
$(window).on('scroll', function () {
$('nav a').removeClass('active');
let cur_pos = $(this).scrollTop();
sections.each(function() {
let top = $(this).offset().top - nav_height - 180,
bottom = top + $(this).outerHeight();
if (cur_pos >= top && cur_pos <= bottom) {
nav.find('a').removeClass('active');
sections.removeClass('active');
$(this).addClass('active');
nav.find('a[href="#'+$(this).attr('id')+'"]').addClass('active');
}
});
});
nav.find('a').on('click', function () {
let $el = $(this),
id = $el.attr('href');
$('html, body').animate({
scrollTop: $(id).offset().top - nav_height
}, 600);
return false;
});
0 comments