//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>