1

我们都知道headroom.js，这是一个很好的小部件，用于在向下/向上滚动时显示/隐藏标题。我会使用这个小部件，但我的用例略有不同。

我现在正在尝试使用 IntersectionObserver 构建它。我的根元素是null，所以它指的是完整的文档。

  // Create observer with callback and config
  observer = new IntersectionObserver(handleIntersect, config);
  // Observe .as-wrapper
  observer.observe(section);

我的 handleIntersect() 函数调用 sticky() 如下所示：

function sticky(target, entry) {
  let prevRatio = 0.0;
  console.log("call sticky function");
  if (entry.isIntersecting) {
    console.log('is interacting');
      if (entry.intersectionRatio > prevRatio) {
        console.log("Your are scrolling down! Hide Header!");
      } else {
        console.log("Your are scrolling up! Show Header!");
      }

    prevRatio = entry.intersectionRatio;
  }
}

函数sticky() 被正确执行。但是，观察者仅触发 1 次。

每次向上或向下滚动时，我该怎么做才能让观察者调用？

IntersectionObserver 是这里的正确选择吗？什么是芳香和透明的替代品？目标是根据滚动方向显示或隐藏任何元素。

4

0 回答 0