JS/CSS Header Resize 上的 Chrome 闪烁

Question

每个人—— 当我使用以下 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 示例仅包含最终标题的一小部分示例 - 生产版本具有其他标题元素，这些元素将在滚动时调整大小/出现/消失。

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

Answer 1

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