Eсть такая структура страницы
$('#sectione_one').on('inview', function(event, isInView) {
if (isInView) {
$('.aside a').addClass('active');
console.log('вижу')
} else {
$('.aside a').removeClass('active');
console.log('не вижу')
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="wrapper">
<div class="aside">
<a href="#sectione_one"></a>
<a href="#sectione_two"></a>
<a href="#sectione_three"></a>
<a href="#sectione_four"></a>
<a href="#sectione_five"></a>
</div>
<div class="content">
<section id="sectione_one"></section>
<section id="sectione_two"></section>
<section id="sectione_three"></section>
<section id="sectione_four"></section>
<section id="sectione_five"></section>
</div>
</div>
Навигационое меню .aside
фиксировано слева.
Надо сделать, что бы при скролле, если видно в поле зрение браузера, соответствующая ссылка a
получала класс active
, где id
страницы и href
ссылки совпадают
Так вот скрипт( с использование библиотеки)
Тут когда дохожу до секции #reviews
, то a
из aside
получает класс active
. Проблема в том, что сейчас получает все ссылки получают класс active
. Мне же надо добавить класс только ссылке, которая совпадает с id
секции.
Так же не могу понять, как сделать, чтобы скрипт работал для всех секций и ссылок меню, а не для каждой в отдельности.
$('.aside a[href="#sectione_one"]').toggleClass('active', isInView);
?