I Used this JQuery code to have a sticky "Go to top" button:
//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);
this code works correctly. but i want when this sticky button reaches a specific class called "go-top", disappears. sorry for my bad english.
You can use interception observer so when the target element with said class is in view, it triggers the callback to hide the button.
Example: The code might not be exact but it is meant to point in the direction to follow.
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;
});
}
Let me know how it goes...
You can switch the root to null but this makes the button disappear as soon as the element with the class is in the viewport