make bottom opaque when scroll down

test.js

const overlay = document.querySelector(".overlay");
let lastScrollTop = 0;

// console.log("I'm in.")

// Apply initial styles
overlay.style.transition = "opacity 0.5s ease";
overlay.style.opacity = "1";

window.addEventListener("scroll", () => {
  let scrollTop = window.pageYOffset || document.documentElement.scrollTop;

  if (scrollTop > lastScrollTop) {
    // Scrolling down
    overlay.style.opacity = "0.1";
  } else {
    // Scrolling up
    overlay.style.opacity = "1";
  }

  // Check if the page is scrolled to the top
  if (scrollTop === 0) {
    overlay.style.opacity = "1";
  }

  lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling
});

// Change opacity when hovering
overlay.addEventListener("mouseover", () => {
  overlay.style.opacity = "1";
});

overlay.addEventListener("mouseout", () => {
  if (window.pageYOffset > 0) {
    overlay.style.opacity = "0.1";
  }
});

// Ensure opacity is 1 when the page can't scroll up anymore
const checkScrollEnd = () => {
  if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
    overlay.style.opacity = "1";
  }
};

window.addEventListener("scroll", checkScrollEnd);
window.addEventListener("resize", checkScrollEnd);