Как в зависимости от скрола менять активный класс?

Question

[Antonio09]

цвет цифры и псевдо
https://jsfiddle.net/xovkLf90/4/

Answer 1

[Александр]

Был похожий вопрос.

Comments

[Antonio09]

Александр, извиние
не совсем
там ссылки проще связь сделать

тут вообще непонятно как связать

[Antonio09]

Александр, вот я пробую
но видимо делаю бред
https://jsfiddle.net/xovkLf90/5/

[Александр]

Antonio09,

const blocks = document.querySelectorAll('li');

const debounce = (callback, delay) => {
  let timeout = null;

  return (...args) => {
    clearTimeout(timeout);

    timeout = setTimeout(callback, delay, ...args);
  };
};

const update = (entries) => {
	const sortedEntries = entries.sort((a, b) => b.intersectionRatio - a.intersectionRatio);
	const entry = sortedEntries[0].target;

	for (let block of blocks) {
		if (block === entry) {
			entry.classList.add('active');
		} else {
			block.classList.remove('active');
		}
	}
};

const debouncedUpdate = debounce(update, 20);

const observer = new IntersectionObserver(entries => {
	debouncedUpdate(entries);
}, { threshold: [0.25] });

for (let block of blocks) {
	observer.observe(block);
}

[Antonio09]

Александр, спасибо
правда вроде как почему то на последнем итеме не совсем корректно работает
не подскажете в чем может быть суть?
https://jsfiddle.net/xovkLf90/7/

[Александр]

Antonio09, Надо либо блоки побольше делать в высоту, либо их в контейнер обернуть и скролл сделать в нем.

[Antonio09]

Александр, блоки побольше? не совсем пойму
а что для этого добавить?

мне кажется контейнер и скролл лучшем
можете показать, пожалуйста?

[Александр]

Antonio09, Этот фокус хорош, когда элементы во всю высоту.

[Antonio09]

Александр, понимаю