玩完之后position: sticky有一段时间，我开始实现粘性导航，并遇到了这个有趣但令人沮丧的滚动弹跳问题。
这是许多网站上常见的导航行为类型，传统上您会使用 JavaScript 来计算页面中相对元素的偏移量。当元素到达窗口顶部时，将添加一个“卡住”类，将元素从文档流中取出position: fixed，并且会在其位置添加一个相同高度的虚拟元素，以防止页面“跳转”。此外，通常会看到 JavaScript 缩小导航的高度以在滚动时节省空间。
CSS 现在似乎可以解决这一切position: sticky，除了（据我所知），检测元素何时“卡住”。相反，我使用了一些 javascript 来进行卡住检测，发现一切都运行良好，直到粘性元素的高度需要改变.
这很难解释，但它对生产造成了严重破坏 - 所以这是我为了尽可能简单地说明问题而制作的一个精简示例。
CSS粘性位置高度调整bug https://codepen.io/bluefantail/pen/zzKNpR
当页面的高度恰到好处时，效果最好，因此我在元素上设置了固定的高度，以确保每个人都能看到相同的内容。您可以添加更多内容，但滚动过去时仍然是一个问题。
结果是一些非常奇怪的行为。向下滚动时，导航会粘住，并且当它缩小导航栏时，浏览器会自动创建“虚拟元素”position: sticky似乎是保持同步用它。这意味着，当添加卡住类时，整个页面会变小，几分之一秒后，导航不再卡住，从而导致出现故障的振动循环。
我测试过的每个浏览器的行为也完全不同。在 Chrome 中，这种弹跳永远无法解决，它停留在无限循环中，不断添加/删除卡住的类。更有趣的是，在 Safari 中，滚动位置被“推回”到不会出错的状态。然后在 Firefox 中，它会执行这两项操作，出现一两秒钟的故障，然后再次强制滚动位置返回。
我想知道是否有人经历过这种情况，并提出任何解决方案？我想出的任何 js 解决方法都没有真正起作用或非常好！当然，随着人气的增长，越来越多的人会选择这个......
欢迎天才的解决方法、技巧、见解或完美的解决方案！
尝试添加overflow-anchor: none;当应用会改变其大小（并可能影响窗口大小/元素定位）的更改时，到粘性元素。
更新：最终，我想到的正确解决方案是：有一个永远不会改变大小的外部元素（在任何给定的断点处它始终具有相同的完整高度）。那个是粘性的。但它也不应该有背景/视觉样式，并且它的有效高度应该由高度 + 下边距定义（以便它在文档中占据适量的初始空间，但实际上不会阻止视觉导航后的点击）缩小并提供更多空间。
然后有一个可以改变尺寸的内部元素，无论是在现实中还是在视觉上。
您还可以使用现代属性，例如 contains:layout size;在内部元素上，例如
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
