Навигация сайта является важнейшей составляющей для пользователя. С её помощью можно легко и удобно найти необходимую информацию. Включает в себя много элементов, сегодня поговорим о подсветке пунктов основного меню при прокрутке, что является неотъемлемой частью функционала, призвана улучшить удобство для посетителя во время посещения сайта. Разберем на простом примере, как это реализовать.
Начинаем с базовой HTML структуры
<body>
<header>
<nav>
<ul>
<li>
<a></a>
</li>
<li>
<a></a>
</li>
<li>
<a></a>
</li>
<li>
<a></a>
</li>
<li>
<a></a>
</li>
</ul>
</nav>
<h1>Header</h1>
</header>
<main>
<section>
<h1>Section 1</h1>
</section>
<section>
<h1>Section 2</h1>
</section>
<section>
<h1>Section 3</h1>
</section>
<section>
<h1>Section 4</h1>
</section>
</main>
</body>Далее необходимо добавить атрибуты и их значения: id и class, так мы связываем секции с пунктами в меню
<body>
<header id="header-display" class="wp-zone">
<nav class="fixed-nav-menu">
<ul>
<li>
<a href="#header-display" class="disable-click">Header</a>
</li>
<li>
<a href="#section-one">Section 1</a>
</li>
<li>
<a href="#section-two">Section 2</a>
</li>
<li>
<a href="#section-three">Section 3</a>
</li>
<li>
<a href="#section-four">Section 4</a>
</li>
</ul>
</nav>
<h1>Header</h1>
</header>
<main>
<section id="section-one" class="wp-zone">
<h1>Section 1</h1>
</section>
<section id="section-two" class="wp-zone">
<h1>Section 2</h1>
</section>
<section id="section-three" class="wp-zone">
<h1>Section 3</h1>
</section>
<section id="section-four" class="wp-zone">
<h1>Section 4</h1>
</section>
</main>
</body>Подключаем каскадные таблицы стилей {CSS}
body{
margin: 0;
padding: 0;
font-family: "RobotoRegular", sans-serif;
font-size: 16px;
color: #FFFFF0;
line-height: 1.6;
overflow-x: hidden;
}
h1,h2,h3,h4,h5,h6,p,ul{
margin:0;
padding: 0;
list-style-type: none;
}
a, button{
text-decoration: none;
border: none;
color: #434343;
}
header{
height: 100vh;
border-bottom: 1px solid #FFFFF0;
background: #DA4453;
background: -webkit-linear-gradient(to right, #89216B, #DA4453);
background: linear-gradient(to right, #89216B, #DA4453);
}
section {
min-height: 754px;
position: relative;
border-bottom: 1px solid #FFFFF0;
}
body section:nth-child(1){
background: #355C7D;
background: -webkit-linear-gradient(to right, #C06C84, #6C5B7B, #355C7D);
background: linear-gradient(to right, #C06C84, #6C5B7B, #355C7D);
}
body section:nth-child(2){
background: #ad5389;
background: -webkit-linear-gradient(to right, #3c1053, #ad5389);
background: linear-gradient(to right, #3c1053, #ad5389);
}
body section:nth-child(3){
background: #000046;
background: -webkit-linear-gradient(to right, #1CB5E0, #000046);
background: linear-gradient(to right, #1CB5E0, #000046);
}
body section:nth-child(4){
background: #4B79A1;
background: -webkit-linear-gradient(to bottom, #283E51, #4B79A1);
background: linear-gradient(to bottom, #283E51, #4B79A1);
}
h1 {
position: absolute;
top: 50%;
left: 50%;
color: #FFFFF0;
letter-spacing: 3px;
padding: 20px;
font-size: 35px;
text-transform: uppercase;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.fixed-nav-menu{
position: fixed;
top: 0%;
width: 100%;
padding: 5px;
text-align: center;
vertical-align: middle;
font-size: 21px;
z-index: 1;
background-color: #FFFFF0;
box-shadow: 0 1px 3px #434343;
-webkit-box-shadow: 0 1px 3px #434343;
transition: top .5s;
-webkit-transition: top .5s;
-moz-transition: top .5s;
-o-transition: top .5s;
}
.fixed-nav-menu li{
display: inline-block;
margin: 0px 10px 0px 10px;
}
.fixed-nav-menu a{
position: relative;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 11px;
padding: 20px 5px;
line-height: 38px;
-webkit-transition: color 0.3s;
-o-transition: color 0.3s;
transition: color 0.3s;
}
.fixed-nav-menu a:hover{
color: #DA4453;
}
.disable-click{
color: #DA4453;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s
}
.disable-click:before,
.disable-click:after{
position: absolute;
content: '';
height: 1px;
width: 14px;
bottom: 49%;
background-color: #DA4453;
}
.disable-click:before{
left: -12px;
}
.disable-click:after{
right: -12px;
}
@media only screen and (max-width: 768px){
h1{font-size:20px;}
}Итак HTML-структура есть, стили установили. Теперь самый интересный и сложный этап.
Необходимо добавить действие при скроллинге.
Конечно же здесь без Javascript нам необойтись. Я буду использовать библиотеку JQuery. Итого сразу подключаем библиотеку JQuery.
<script type="text/javascript" src="libs/jQuery/jquery-3.2.1.min.js"></script>Так же необходимо подключить библиотеку Waypoints.js, которую скачиваем по ссылке
<script src="libs/waypoints/jquery.waypoints.min.js"></script>Waypoints - это библиотека, которая значительно упрощает выполнение функции каждый раз ,когда мы переходим к элементу с помощью скроллинга, т.е. мы можем показывать любой элемент при нахождении посетителя в заданной точке страницы.
Давайте теперь на примере (js код ниже) рассмотрим, как нам подсветить пункт меню навигации при нахождении пользователя на определённой секции.
$(document).ready(function(){
//down
$('.wp-zone').waypoint(function(direction) {
if (direction === 'down') {
$('nav a').removeClass('disable-click');
// form the selector dynamically.
// "this" keyword refers waypoint object and the element is located at "this.element"
// using "this.element.id", get the nav anchor you want to target
// example: "nav a[href='#landing']"
var selector = "nav a[href='#" + this.element.id + "']";
$(selector).addClass('disable-click');
}
}, {
offset: '5%'
});
//up
$('.wp-zone').waypoint(function(direction) {
if (direction === 'up') {
$('nav a').removeClass('disable-click');
var selector = "nav a[href='#" + this.element.id + "']";
$(selector).addClass('disable-click');
}
}, {
offset: '-50%'
});
});С кодом предалагаю разобраться самостоятельно, т.к. он на 10 строк, с читабельной структурой и понятными комментариями. Вот и все, пункты нашего меню подсвечиваются при нахождении пользователя в области секции.