JS 1 min
Изменение активного пункта меню при скролле
Привет! В этой статье расскажу, как можно своими руками написать скрипт, который будет давать активному меню элемента класс
Итак, давайте разбираться. Напишем простейший html.
HTML
<nav class="nav">
<ul>
<li><a href="#" class="active">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
<li><a href="#">Five</a></li>
</ul>
</nav>
<section class="section"></section>
<section class="section"></section>
<section class="section"></section>
<section class="section"></section>
<section class="section"></section>
<script src="script.js"></script>
Просто секции и сопоставимые с ним элементы навигации - ссылки.
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.nav {
position: fixed;
left: 0;
top: 0;
width: 100%;
background-color: #131313;
padding: 20px;
}
ul {
display: flex;
list-style-type: none;
}
a {
text-decoration: none;
color: #fff;
font-family: sans-serif;
display: inline-block;
margin-right: 25px;
}
a.active {
color: red;
}
.section {
height: 100vh;
border: 1px solid #000;
}
Немного CSS, чтоб было не скучно, а также чтоб создать класс active
и задать секциям размеры.
JS
window.addEventListener('scroll', () => {
let scrollDistance = window.scrollY;
if (window.innerWidth > 768) {
document.querySelectorAll('.section').forEach((el, i) => {
if (el.offsetTop - document.querySelector('.nav').clientHeight <= scrollDistance) {
document.querySelectorAll('.nav a').forEach((el) => {
if (el.classList.contains('active')) {
el.classList.remove('active');
}
});
document.querySelectorAll('.nav li')[i].querySelector('a').classList.add('active');
}
});
}
});
Ну и относительно несложный JS:
- Проходим по всем секциям на сайте
- Смотрим, если отступ сверху у секции меньше или равен показателю скролла — тогда пробегаемся по ссылкам и нужной ссылке (через index) задаем класс
В общем-то и все, очень простой код. Надеюсь, поможет вам. Исходники внизу, а видео — в начале поста)
Удачи!
Исходники по данной теме: github