@Araya

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

Всем добрый вечер.
Есть менюшка на 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 штук
  • Вопрос задан
  • 202 просмотра
Решения вопроса 1
kshshe
@kshshe
Frontend developer
Можно так (вроде бы, в этот раз ничего не упустил):
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');
      }
    }
  })
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы