滚动到特定类时隐藏元素

Question

我使用这个 JQuery 代码有一个粘性的“转到顶部”按钮：

//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);

此代码可以正常工作。 但我想当这个粘性按钮到达一个名为“go-top”的特定类时消失。对不起我的英语不好。

Answer 1

您可以使用interception observer，这样当具有所述类的目标元素在视图中时，它会触发回调以隐藏按钮。

示例：代码可能不准确，但它旨在指明要遵循的方向。

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;
  });
}

告诉我进展如何...

您可以将root 切换为null，但这会使按钮在具有该类的元素在视口中时消失