Skip to content

Instantly share code, notes, and snippets.

@daviddarnes
Created February 8, 2022 13:10
Show Gist options
  • Save daviddarnes/25df15843e204ff45c1a553df6a23cd0 to your computer and use it in GitHub Desktop.
Save daviddarnes/25df15843e204ff45c1a553df6a23cd0 to your computer and use it in GitHub Desktop.
Hide a button when an element is no longer visible in the viewport
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);
}
[data-visible="false"] {
transition: 0.2s;
opacity: 0;
visibility: hidden;
}
[data-visible="true"] {
opacity: 1;
visibility: visible;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment