//JS code: let li = document.querySelectorAll(".navilinks"); let sec = document.querySelectorAll("h1"); function activeMenu() { let len = sec.length; while (--len && window.scrollY + 90 < sec[len].offsetTop) {} li.forEach((ltx) => ltx.classList.remove("activenavi")); li[len].classList.add("activenavi"); } activeMenu(); window.addEventListener("scroll", activeMenu);

 <!--HTML code:--> </div> <div class="navibar" id="navi"> <a href="#home" class="button transparent block hover-blue-grey navilinks linkovi activenavi">Home <span class="fa fa-home linkovi"></span></a> <a href="#about" class="button transparent block hover-pale-red navilinks linkovi">About <span class="fa fa-user linkovi"></span></a> <a href="#work" class="button transparent block hover-teal navilinks linkovi ">My Work <span class="fa fa-book linkovi"></span></a> <a href="#resume" class="button transparent block hover-dark-grey navilinks linkovi ">Resume <span class="fa fa-file linkovi"></span></a> <a href="#hobies" class="button transparent block hover-blue-grey navilinks linkovi ">Hobbies <span class="fa fa-camera linkovi"></span></a> <a href="#contact" class="button transparent block hover-brown navilinks linkovi ">Contact <span class="fa fa-address-card-o linkovi"></span></a> </div> </div>