Question

我们都知道 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倍。

我该怎么做才能使Observer每次向上或向下滚动？

在这里，IntersectionObserver是正确的选择吗？有什么香气和清澈的替代品？目的是根据滚动方向显示或隐藏任何元素。

使用纯JavaScript与IntersectionObserver向下/向上滚动隐藏/显示标题

0 个答案: