Как изменить стиль, если страница прокручена до #id?

Question

[Влад]

Пациент expert-obzor.ru/rejting-luchshix-kitajskix-smartfo...

Справа идёт навигация по заголовкам на странице с ссылкой на них в виде url.html#id

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

Ну то есть дошёл я до заголовка "Топ 10 китайских смартфонов по аккумулятору (батарее)." --> справа в навигации этот заголовок подчёркнулся.

Comments

[V Sh.]

Отслеживайте событие onscroll на прокручивоевом элементе и в зависимости от значения скролла делайте что хотите.

Answer 1

[Кирилл Ушаков]

на чистом js:

var parent = document.getElementsByClassName('entry-content');
var child = parent[0].getElementsByTagName('H2');
var childArray = Object.keys(child).map(function(key) {return child[key]});

window.addEventListener('scroll', function() {
	childArray.forEach(function(item) {
		if (item.getBoundingClientRect().top < 50) {
			for (var i = 0; i < document.getElementsByClassName('side-nav-links').length; i++) {
				document.getElementsByClassName('side-nav-links')[i].style.fontWeight = '500';
			}
			var node = item.getAttribute('data-id');
			var sideNav = document.getElementById(node);
            sideNav.style.fontWeight = '900';
		} 
	})
})

Все заголовки в h2, каждому проставить data-id, ссылкам в боковом меню проставить соответствующие id и class (из кода выше это side-nav-links, но можно и на свой заменить)