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

Question

[Иван Иванов]

Добрый день, подскажите пожалуйста. У меня есть фиксированный аппбар с якорными ссылками, я хочу чтобы при пролистывании страницы, в аппбаре появлялось нижнее подчеркивание под той якорной ссылкой, которая посылает на блок, который видит сейчас пользователь. Можно ли это реализовать на одном JS?(с jQuery пока что не работал).

<div>
		<header>
			<div class="header_name">Golden</div>
			<div class="header_items">
				<a href="#header">Home</a>
				<a href="#services">Services</a>
				<a href="#portfolio">Portfolio</a>
				<a href="#about">About</a>
				<a href="#contact">Contact</a>
			</div>
		</header>
		<!-- Home-->
		<div class="header" id="header">
			...
		</div>
		
		<!-- Services -->
		<div class="services" id="services">
			...
		</div>

		<!-- Portfolio -->
		<div class="portfolio" id="portfolio">
			...
		</div>

		<!-- About Us -->
		<div class="about" id="about">
			...
		</div>

		<!-- Contact Us -->
		<div class="contact" id="contact">
			...
		</div>

Answer 1

[hzzzzl]

будь хакиром, делай по-модному
https://developer.mozilla.org/en-US/docs/Web/API/I...

Comments

[Иван Иванов]

Спасибо, буду хакиром)

[White_Rawen]

Немного поправил скрипт чтобы исправить баг с показом послледнего ИД в самом начале. Заменил forEach на цикл for с перебором в обратном порядке.

const options = {
  rootMargin: '0px',
  threshold: 0.7
}
  
const observer = new IntersectionObserver(callback, options);
const targets = document.querySelectorAll(".sectionCounter");
targets.forEach(t => observer.observe(t))
  
function callback (entries, observer) { 
  for (let i = entries.length - 1; i >= 0 ; i--) {
    sectionNumber.textContent = entries[i].target.dataset.id;
  };
}

Answer 2

[Дмитрий Арушанов]

Тут вот был вопрос, как реализовать похожий функционал. (вроде совпадает с вашими потребностями)
Как реализовать скролл элементов сайдбара?
Я там дал ссылку на скрипт js который в теории это делает

Comments

[Дмитрий Арушанов]

Ну по идее,(без этой библиотеки) можно вешаться на событие скрола, и получать отступ от верхнего края экрана для каждого из нужных блоков. и на основании этих значений понимать что нужно подсвечивать и добавлять active класс к нужному элементу

Answer 3

[Eugene Chefranov]

// ACTIVE ITEM OF MENU
     $(window).scroll(function () {
         var $sections = $('.section');
         $sections.each(function (i, el) {
             var top = $(el).offset().top - 0;
             var bottom = top + $(el).height();
             var scroll = $(window).scrollTop();
             var id = $(el).attr('id');
             if (scroll > top && scroll < bottom) {
                 $('.header_items a.active').removeClass('active');
                 $('.header_items a[href$="' + id + '"]').addClass('active');
             }
         })
     });

Добавьте каждому разделу класс section