Здравствуйте, есть сайт примерно такой конструкции:
<section id="section1">...</section>
<section id="section2">...</section>
<section id="section3">...</section>
<section id="section4">...</section>
Секции по высоте 100vh и стоит плагин для скролла по ним
Scrollify.js
Сбоку есть фиксированное меню на uikit позволяющее лисать сайт по якорям.
Нужно сделать так, чтобы когда мы находимся на одних якорях цвет текста меню был белым, а на других черный.
Вот что смог собрать со всех ссылок в гугле, но не работает, да и я не особо разбираюсь, а сроки горят. Помогите пожалуйста.
window.addEventListener(function(){
var scroll1 = $('#section1').offset().top;
var scroll2 = $('#section2').offset().top;
var scroll3 = $('#section3').offset().top;
var scroll4 = $('#section4').offset().top;
var scroll5 = $('#section5').offset().top;
var scroll6 = $('#section6').offset().top;
var scroll7 = $('#section7').offset().top;
var scroll8 = $('#section8').offset().top;
var scrollTop = window.pageYOffset;
if (scrollTop == scroll1
|| scrollTop == scroll3
|| scrollTop == scroll5
|| scrollTop == scroll7
) {
$('.menu > li > a').css('color', '#fff') //смена стиля класса пунктов меню
} else if (scrollTop == scroll2
|| scrollTop == scroll4
|| scrollTop == scroll6
|| scrollTop == scroll8
) {
$('.menu > li > a').css('color', '#000') //смена стиля класса пунктов меню
}
});