Javascript-форум - Смена класса при скроллинге

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Смена класса при скроллинге (https://javascript.ru/forum/misc/67011-smena-klassa-pri-skrollinge.html)

Смена класса при скроллинге

Здравствуйте, есть сайт примерно такой конструкции:

<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') //смена стиля класса пунктов меню
} 
});

Смена класса при скроллинге

Dayros,
идея Malleys,
http://javascript.ru/forum/misc/6671...tml#post439811

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
    <style>

html {
  background: url("http://wallpaperscraft.com/image/mazda_white_front_view_113205_5064x3376.jpg") center / cover;
  background-attachment: fixed;
  height: 100vh;
}

body, .scrolling {
  margin: 0;
  height: 100vh;
  overflow: auto;
}

nav {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  padding: 1em 1.5em;
  margin: 1em;
  border-radius: 70% 15% 40% 11%;
  z-index: 1;
  font-weight: bold;
  font-size: 130%;
}

section {
  height: 100vh;
  position: relative;
  top: 100vh;
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  font: 20vh "Helvetica Neue", sans-serif;
}

section:nth-child(2n + 1), nav.white {
  color: #fff;
  background: #000;
  mix-blend-mode: multiply;
}

section:nth-child(2n), nav {
  color: #000;
  background: #fff;
  mix-blend-mode: screen;
}

    </style>
  </head>
  <body>

      <nav>☰</nav>
      <section>Lorem</section>
      <section>Ipsum</section>
      <section>Dolor</section>
      <section>Sit</section>
      <section>Amet</section>


    <script>
window.addEventListener("DOMContentLoaded", function() {
    var nav = document.querySelector("nav");
    var element = document.querySelector("body");
    document.addEventListener("scroll", function() {
        var progress = .5 + window.pageYOffset / element.offsetHeight | 0;
        nav.classList[progress % 2 ? "add" : "remove"]("white")
    })
});
    </script>
  </body>
</html>

рони, а как добавить к классу .menu > li > a класс white?)

Dayros,
:-?

var nav = document.querySelector(".menu");

.menu.white > li > a { 
  color: #fff; }

рони, спасибо, скрипт заработал, но как то криво. Короче у меня 8 секций, и на первых четырёх ничего не меняется, а потом просто становится белым и не меняется на последующих 4 секциях, но при прокрутке между 4 и 5 секциями классы меняются.

Dayros,
делайте макет с вашей структурой здесь или любой песочнице

Dayros,
строка 3

var element = document.querySelector("section");

https://jsfiddle.net/651avv54/4/

рони, спасибо огромное!

рони, извините за надоедливость, но я сделал на сайте мультиязычность, то есть теперь url выглядит так - https://site.ru/ru/ или https://site.ru/en/, и теперь скрипт перестал работать, хотя в heade он есть.