JS/CSS Header Resize 上的 Chrome 闪烁

Posted 2023-05-08

【中文标题】JS/CSS Header Resize 上的 Chrome 闪烁

【英文标题】：Flicker in Chrome on JS/CSS Header Resize

【发布时间】：2021-01-30 12:30:08

【问题描述】：

每个人—— 当我使用以下 javascript 修改 Bootstrap 模板中某些标题元素的 css/class 显示属性时，我在 Chrome 中遇到了一个奇怪的闪烁问题。

$(window).scroll(function() 
  if ($(window).scrollTop() > 100) 
    $('header').addClass('shrink');
   else 
    $('header').removeClass('shrink');
  
);

这是针对该问题的 CodePen：https://codepen.io/simon315/pen/pobyozw

当用户向下滚动页面时，函数运行，但如果用户在该点停止/放慢滚动速度，addClass 和 removeClass 元素似乎来回移动，导致状态闪烁，但仅在铬合金。所有其他浏览器似乎都按预期工作（例如，Firefox、Safari、Edge 等）。

我们很清楚，CodePen 示例仅包含最终标题的一小部分示例 - 生产版本具有其他标题元素，这些元素将在滚动时调整大小/出现/消失。

如何防止这种情况发生，或者是否有其他解决方案可以让我在用户滚动到页面上的某个点后修改标题？

【问题讨论】：

我建议不要改变标题的高度，这反过来会改变你滚动页面的距离。

看看这个 CSS：jsfiddle.net/bgb8oa1c

【参考方案1】：

问题是由于在标题元素上使用了“位置：粘性”。将此更改为“位置：固定”使闪烁消失。然而，其他特定于设计的挑战刚刚出现，所以现在开始处理它们。谢谢@natel 提供的示例 css - 这让我对 css 定位有了记忆。

【讨论】：

只是一个快速跟进，如果有人 需要 像我一样为他们的元素使用“position:sticky”，一个快速修复让它在用户滚动是保持“位置：粘性”，但一旦用户向下滚动页面，其属性就会更改为“位置：固定”。