javascript - 缩小粘性标题会导致某些滚动位置的 Blink/Webkit 闪烁

Question

我有一个粘性 header ，它利用 IntersectionObserver 在卡住时获得一个类，然后隐藏一些元素并减小 Logo 的大小。当然，当标题的高度缩小时，滚动高度也会缩小，因此如果您向下滚动刚好以缩小标题，它就会缩小，然后意识到它不再卡住所以会变大，但是这导致它再次收缩，所以它增长，等等无限循环。这在 Chrome 中似乎是最令人震惊的，但我已经看到它也发生在 Firefox 中(尽管 Firefox 似乎认识到正在发生的事情并自行解决)。

我已经尝试了很多东西，包括 setTimeout() 以在类被删除时延迟，在缩小时向标题添加等效的 margin-bottom ，显示具有缩小空间的 height 的隐藏元素，但似乎无法解决此问题。

我知道我以前也在其他网站上看到过这种情况，我怀疑这只是缩小 header 的系统性问题，但我能做些什么来防止这种情况发生吗？我没主意了。

const OBSERVER = new IntersectionObserver(
    ([e]) => e.target.classList.toggle("js-is-sticky", e.intersectionRatio < 1),
    {
        rootMargin: document.getElementById("wpadminbar") ? "-32px 0px 0px 0px" : "0px 0px 0px 0px",
        threshold: [1],
    }
);

OBSERVER.observe(document.querySelector(".sticky-block"));

CSS 和标记有点复杂(并且稍微不相关)，因此如果需要，请在此处引用我们的演示站点。 https://gepl.myweblinx.net/

如果需要其他任何内容，我很乐意添加。

编辑 1:我看到 this answer建议在保持正确高度的元素周围放置一个容器，但这不适用于 position: sticky; 因为 position: sticky; 仅适用于最近的容器(除非有人知道如何解决这个问题？)

编辑 2:我对第一次编辑的答案想得太多了

Answer 1

好吧，这是一个非常明显的解决方案...感谢 this answer ，我能够弄清楚，如果我只是在粘性元素上设置一个固定的高度，但让该元素的内容缩小，问题就会消失。

本质上:

<div class="sticky-block" style="height:140px;">
    <div class="header-block">
        ...
    </div>
    <div class="navigation-block">
        ...
    </div>
</div>