Здравствуйте.
Как сменить цвет элемента навигации при прокрутке страницы через JS?
Есть панель навигации
Нужно в определенном моменте страницы соответствующий элемент в навигации менял цвет на чёрный, при дальнейшем скролле возвращался исходный цвет, а следующий элемент так же менялся на черный. Соответственно и при скролле, и при нажатии. Все облазил, помогите пожалуйста.
Код навигации в header:
<nav class="header__menu">
<ul class="header__list">
<li class="header__item0">
<a href="#1" class="header__link">Home</a>
</li>
<li class="header__item1">
<a href="#2" class="header__link">About me</a>
</li>
<li class="header__item2">
<a href="#3" class="header__link">Skills</a>
</li>
<li class="header__item3">
<a href="#4" class="header__link">Portfolio</a>
</li>
<li class="header__item4">
<a href="#5" class="header__link">Contacts</a>
</li>
</ul>
</nav>
CSS
.header__menu {
font-size: 18px;
font-weight: 700;
position: absolute;
}
.header__list {
display: flex;
padding: 0;
flex-wrap: wrap;
}
.header__list li {
list-style-type: none;
}
.header__link {
color: #828282;
line-height: 157%;
text-decoration: none;
}
.header__link:hover {
color: #000;
}
JS анимация скролла
$( 'a[href*="#"]' ).on( 'click', function( e ) {
e.preventDefault();
$( 'html, body' ).stop().animate( {
scrollTop: $( $( this ).attr('href') ).offset().top - 80
}, 700);
} );
И мои попытки решить проблему:
$( window ).on( 'scroll', function () {
$( 'div[id*=".header__link"]' ).each( function() {
let $currentItem = $( this );
if ( $currentItem.offset().top >= scrollY ) {
$( 'a[href="#' + $currentItem.attr( 'id' ) + '"]').addClass( 'scrolled' )
.parent().siblings().find('a').removeClass('scrolled');
return false;
}
} );
} );
Средний
