Hide a button when an element is no longer visible in the viewport

script.js

const targetEl = document.querySelector("#theButtonOrElement");
const watchedEl = document.querySelector("#TheElementYoureWatching");

const intersectionObserver = new IntersectionObserver((entries) => {
  if (entries[0].intersectionRatio > 0) {
    footerTopButton.setAttribute("data-visible", false);
  } else {
    footerTopButton.setAttribute("data-visible", true);
  }
});

if (targetEl && watchedEl) {
  targetEl.setAttribute("data-visible", false);
  intersectionObserver.observe(watchedEl);
}

style.css

[data-visible="false"] {
  transition: 0.2s;
  opacity: 0;
  visibility: hidden;
}

[data-visible="true"] {
  opacity: 1;
  visibility: visible;
}