Есть скрипт, который добавляет/убирает класс active
с nav-link
в зависимости от секции
. Но есть одно но, количество секций
не равно количеству nav-link
, поэтому необходимо, чтобы класс active
убирался, если в данный момент неактивная секция
. Сейчас же, если мы на неактивной секции
, то класс active
будет на nav-link
предыдущей активной секции. Надеюсь понятно объяснил, если не поняли - спрашивайте. Так же snippet добавил, там показано как это сейчас работает.
const links = document.querySelectorAll('.nav-link');
const sections = document.querySelectorAll('.forJS');
function changeLinkState() {
let index = sections.length;
while(--index && window.scrollY + 50 < sections[index].offsetTop) {}
links.forEach((link) => link.classList.remove('active'));
links[index].classList.add('active');
}
changeLinkState();
window.addEventListener('scroll', changeLinkState);
section{
height:100vh;
scroll-y:auto;
}
.nav-link.active{
color: red;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<header class="fixed-top">
<nav class="navbar navbar-expand-lg navCustom">
<div class="container">
<ul class="navbar-nav justify-content-center">
<li class="nav-item">
<a class="nav-link" href="#main">Main</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contacts">Contacts</a>
</li>
</ul>
</div>
</nav>
</header>
<section class="forJS text-center">Some info 1</section>
<section class="text-center">Some info 2</section>
<section class="text-center">Some info 3</section>
<section class="forJS text-center">Some info 4</section>
<section class="forJS text-center">Some info 5</section>
<section class="text-center">Some info 6</section>
<section class="text-center">Some info 7</section>
<section class="text-center">Some info 8</section>
<section class="text-center">Some info 9</section>
<section class="forJS text-center">Some info 10</section>
</body>
id
выставть, ибо у меню естьhref
на секцию