Scrolling heading inside TOC

toc_scrolling.html

<div class="toc">
	<ol>
		<li class=""><a href="#heading-1">Heading 1</a></li>
		<li class=""><a href="#heading-2">Heading 2</a></li>
	</ol>
</div>

toc_scrolling.js

// scrolling toc
// -----------------------------------------
if (document.querySelectorAll("h2, h3, h4") != null) {
	function headingTOC() {
		document.querySelectorAll("h2, h3, h4").forEach((heading) => {
			if (document.getElementsByTagName("html")[0].scrollTop >= heading.offsetTop - 100) {
				var id = heading.getAttribute("id"); // id of headings
				if (id != null) {
					var toc = document.getElementsByClassName("toc")[0];
					if (toc != null) {
						toc.querySelectorAll("a").forEach((item) => {
							item.parentElement.classList.remove("toc-active");
						});
						document.querySelector(`.toc li a[href="#${id}"]`).parentElement.classList.add('toc-active');
					}
				}
			}
		});
	}
	addEventListener("scroll", headingTOC);
}

toc_scrolling.scss

.toc-active {
  & > a {
    color: #fff !important;
  }

  &::before{
    opacity: 1!important;
  }
}