Javascript event changer on scroll does not recognise bottom page

I made a script that changes the navbar text to UPPERCASE when you scroll to that part of the page and it works fine except when I get to the bottom of the page. If I make the bottom div like 65vh it works fine but since the lat part is a footer with the contact info more than 40vh is useless. Do you have any suggestions on how to make it work independently from the size of the div please :)

This is the .js script

const sections = document.querySelectorAll("section");
const navLi = document.querySelectorAll("nav a");
window.addEventListener("scroll", () => {
  let current = "";
  sections.forEach((section) => {
    const sectionTop = section.offsetTop;
    const sectionHeight = section.clientHeight;
    if (pageYOffset >= sectionTop - sectionHeight / 1) {
      current = section.getAttribute("id");
    }
  });

  navLi.forEach((a) => {
    a.classList.remove("active");
    if (a.classList.contains(current)) {
      a.classList.add("active");
    }
  });
});