Как правильно подсвечивать якорные ссылки на VanillaJS?

Question

[Araya]

Всем добрый вечер.
Есть менюшка на position: fixed в которой расположены ссылки.
Задача: менять цвет якоря в соответствующей секции этому якорю.

window.addEventListener('scroll', ()=>{
let topSectionOne = sectionOne.getBoundingClientRect().top - menuFixedHeight;
let botSectionOne = sectionOne.getBoundingClientRect().bottom - menuFixedHeight;
let topSectionTwo= sectionTwo.getBoundingClientRect().top - menuFixedHeight;

if(topSectionOne <= 0){
    sectionOneButton.classList.add('active');
}

if(botSectionOne <= 0 && topSectionTwo<= 0){
    sectionOneButton.classList.remove('active');
    sectionTwoButton.classList.add('active');
}

Такой способ не очень хороший, да и много нюансов. Подскажите, как не плодить кучу if'ов, а может как-то можно сделать на одном if'e?
Самых ссылок и блоков 6 штук

Answer 1

[Алексей Лауд]

Можно так (вроде бы, в этот раз ничего не упустил):

const sections = [
  {
    section: sectionOne,
    button: sectionOneButton
  },
  {
    section: sectionTwo,
    button: sectionTwoButton
  },
  // остальные секции
];

window.addEventListener('scroll', () => {
  const offsets = sections.map(section => {
    const rect = section.section.getBoundingClientRect();
    return {
      top: rect.top - menuFixedHeight,
      bottom: rect.bottom - menuFixedHeight,
    };
  })

  offsets.forEach((offset, key) => {
    if (offset.top <= 0 && (key === 0 || offsets[key - 1].bottom <= 0)) {
      sections[key].button.classList.add('active');
      if (key !== 0) {
        sections[key - 1].button.classList.remove('active');
      }
    }
  })
}

Comments

[Araya]

Во, откликнулись, спасибо!)
И для каждой секции мы пишем новый If, но с разным условием?

[Алексей Лауд]

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

[Araya]

Алексей Казаков, омагад, сейчас попробую

[Araya]

Алексей Казаков, магия какая-то, все работает отлично, правда в одну сторону. Если я снизу вверх скроллю, то активируются все кнопки, не подскажешь, пожалуйста, как пофиксить?
В таком коде пока не очень хорошо ориентируюсь :с

[Алексей Лауд]

Можно попробовать так:

const sections = [
  {
    section: sectionOne,
    button: sectionOneButton
  },
  {
    section: sectionTwo,
    button: sectionTwoButton
  },
  // остальные секции
];

window.addEventListener('scroll', () => {
  const offsets = sections.map(section => {
    const rect = section.section.getBoundingClientRect();
    return {
      top: rect.top - menuFixedHeight,
      bottom: rect.bottom - menuFixedHeight,
    };
  })

  offsets.forEach((offset, key) => {
    // Определили, что секция активна
    if (offset.top <= 0 && offset.bottom > 0) {
      // Убрали у всех класс
      sections.forEach(section => section.button.classList.remove('active'))
      // Добавили активной
      sections[key].button.classList.add('active');
    }
  })
}

[Araya]

Алексей Казаков, Огромнейшее спасибо, все отлично работает. Обязательно сохраню для себя этот код.
Еще раз спасибо!!

[Алексей Лауд]

Araya, пожалуйста :)