Usé este código JQuery para tener un botón fijo "Ir al principio":
//sticky back-to-top button (function (t) { t(window).bind("scroll", function () { 500 < t(this).scrollTop() ? t(".back-to-top").fadeIn(400) : t(".back-to-top").fadeOut(400); }), t(".back-to-top").click(function () { t("html, body").animate({ scrollTop: "0px" }, 500); }); })(jQuery);este código funciona correctamente. pero quiero que cuando este botón pegajoso alcance una clase específica llamada "ir arriba", desaparezca. Perdón por mi mal ingles.
Puede usar el observador de intercepción para que cuando el elemento de destino con dicha clase esté a la vista, active la devolución de llamada para ocultar el botón.
Ejemplo: el código puede no ser exacto, pero está destinado a señalar la dirección a seguir.
let options = { root: document.querySelector('.go-top'), rootMargin: '0px', threshold: 1.0 } let prevRatio = 0.0; let observer = new IntersectionObserver(callback, options); let target = document.querySelector('#back-to-top-button'); observer.observe(target); function handleIntersect(entries, observer) { entries.forEach((entry) => { if (entry.intersectionRatio > prevRatio) { entry.target.style.display = "none"; } else { entry.target.style.backgroundColor = "block"; } prevRatio = entry.intersectionRatio; }); }Déjame saber como va...
Puede cambiar la root a null , pero esto hace que el botón desaparezca tan pronto como el elemento con la clase esté en la ventana gráfica