Как правильно вызвать callback во время события scroll?

Question

[Slighty limbo]

Здравствуйте!
Учусь JS, для пет-проджекта хочу реализовать следующее:

Картинка верстки

Что должно происходить

Codepen демонстрация

И еще раз на словах: во время пересечения заголовком определенной координаты, нужно в навигации слева менять класс. (вызвать тот самый callback)

Два дня страдаю над этим, что только не пробовал, скорее всего в корне подход избрал не верный. Посему, прошу помочь.
Координаты заголовка получаю методом:
element.getBoundingClientRect()

Тупой подход, для понимания в коде что должно происходить во время события scroll:

scrollObject.addEventListener('scroll', (evt) => {
  let coord = round(-section.getBoundingClientRect().y)
  let i = 0

  if (coord > 350) {
    addActiveClass(i)
    i++
  } else if (coord < 350) {
    removeActiveClass(i)
    i--
  } 
  if (coord > 750) {
    addActiveClass(i)
    i++
  } else if (coord < 750) {
    removeActiveClass(i)
    i--
  }
})

Всем неравнодушным огромное спасибо! :)

Answer 1

[lookfortheroot]

Если вы не против другого подхода, то намного проще сделать связь элементов.
Скажем, заголовок с атрибутом data-id="2020", и в навигации data-id="2020".
Далее при прокрутке к заголовку получаем такой же id в навигации и делаем что нужно.

Comments

[Slighty limbo]

Спасибо за ответ!
Совершенно не против сменить подход. Но не понимаю, как при скролле отлеживать какой сейчас заголовок в окне? Тем более, что заголовков много... Буду благодарен, если чуть разжуете.
Вот ссылка на codepen чтобы подробнее посмотреть детали:

[lookfortheroot]

Slighty limbo, у вас ошибка при прокрутке в функции removeActiveClass: items[i] is undefined

[Slighty limbo]

lookfortheroot, это известно, спасибо) на локалке разрабатываю, исправил. Не могли бы вы ответить на основной вопрос пожалуйста?
В настоящий момент я до выполнения события скролл в массив собрал координаты каждого заголовка, но но как обратиться к конкретному заголовку в конкретный момент времени таки ума не приложу....

Answer 2

[twobomb]

Можно типа такого

Тут можно поправить типа
if(sumHeight -30 >= scrollTop)
крч посмотреть

Answer 3

[100380]

Возможно это поможет.

Не оптимизировано, но логика, надеюсь, будет ясна.

1. Собираешь все свои секции за которыми надо следить.
2. Вешаешь обработчик события на скролл ноду - в нашем случае window, но можно докрутить и до контенра на странице с внутренним скролом. Но в таком случае надо будет расчитывать координаты относительно родителя.
3. При каждом скролле проходишь по массиву секций и выясняешь зашла ли она за указанное в offset расстояние по вертикали (сверху 0), для примера середина экрана window.innerHeight/2, и не поднялся ли низ секции из того же офсета (некоторые браузеры могут ругаться на отсутсвующее свойство .bottom в результате getBoundingClientRect(), поэтому в примере bb.top + bb.height). Это нужно для деактивации пункта навигации - одна зашла - другие вышли.
4. Цепляешь класс .active если секция вошла по data-id => data-nav-id если его нет еще или снимаешь его если он есть.



Обязательно нужен дебаунс на скролле хотя бы в 100ms.