我有一个粘性 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:我对第一次编辑的答案想得太多了
最佳答案
好吧,这是一个非常明显的解决方案...感谢 this answer ,我能够弄清楚,如果我只是在粘性元素上设置一个固定的高度,但让该元素的内容缩小,问题就会消失。
本质上:
<div class="sticky-block" style="height:140px;">
<div class="header-block">
...
</div>
<div class="navigation-block">
...
</div>
</div>
关于javascript - 缩小粘性标题会导致某些滚动位置的 Blink/Webkit 闪烁,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69855309/