Как сделать проверку в какой секции находится пользователь и отобразить это в меню?

Question

Сайт разделен на секции section с id. Сайт одностраничный, навигация происходит через меню по id к каждой секции, с этим проблем нету. Как сделать, чтобы попадая в определенную секцию, в меню менялся активный элемент? Структура такая:

    <li class="nav-item active">
          <a class="nav-link" href="#main">Главная <span class="sr-only">(current)</span></a>
   </li>
    <li class="nav-item">
          <a class="nav-link" href="#about">Информация</a>
   </li>

Answer 1

Взять элемент из страницы и проверить находится ли этот элемент во viewPort пользователя Для этого можно сделать следующее:

Получить текущее расстояние от верха страницы до элемента
Получить текущую позицию на сколько проскролил сайт пользователь
Сверить эти два значение
Если одно больше другого то искать ссылку в меню в которой в атрибуте href находится текущий id элемента
Добавить активный класс к найденному элементу

Answer 2

Вот минимальный пример:

window.addEventListener('scroll', event => {
  let navigationLinks = document.querySelectorAll('ul li a');
  let fromTop = window.scrollY;
  navigationLinks.forEach(link => {
    let section = document.querySelector(link.hash);
    if (
      section.offsetTop <= fromTop &&
      section.offsetTop + section.offsetHeight > fromTop
    ) {
      link.classList.add('active');
    } else {
      link.classList.remove('active');
    }
  });
});

* {margin: 0; padding: 0;}
a {text-decoration: none;}

section {height: 150vh;}

#one {background: aquamarine;}
#two {background: chocolate;}
#three {background: coral;}

ul {position: fixed; top: 0; left: 0;}

.active {border-bottom: 2px solid;}

<ul>
  <li><a class="active" href="#one">Один</a></li>
  <li><a href="#two">Два</a></li>
  <li><a href="#three">Три</a></li>
</ul>

<section id="one"></section>
<section id="two"></section>
<section id="three"></section>

БЛОГ НА HUSL

Как сделать проверку в какой секции находится пользователь и отобразить это в меню?

Ответы (2 шт):