Javascript 为什么固定块在滚动上闪烁？

我需要在底部创建标题，并在用户滚动时将其固定在顶部

为什么我滚动固定标题时会闪烁

这是一段代码：

$（文档）。滚动（函数（）{
var bodyTop=$（'body'）。scrollTop（）；
var navOffset=$（'.main nav'）.offset（）.top；
$（'main nav'）.toggleClass（'header-fixed'，（bodyTop>navOffset））；
});
.wrapper{height:99000px；}
.header固定{
位置：固定！重要；顶部：0！重要；
底部：无；背景：黄色！重要；}
.主导航{宽度：100%；高度：72px；位置：绝对；底部：0；背景：蓝色；}
我已将元素偏移量的计算移到了滚动之外，只需计算一次即可。通过这样做，它不会在每次滚动时干扰奇怪的计算，而且它修复了闪烁


var navOffset=$（'.main nav'）.offset（）.top；
$（文档）.on（“滚动”，函数（）{
var bodyTop=$（'body'）。scrollTop（）；
$（“.main nav”）.toggleClass（“表头固定”，（车身顶部>导航偏移量））；
});
.wrapper{
高度：99000px；
}
.收割台固定{
位置：固定！重要；
顶部：0！重要；
背景：黄色！重要；
}
.主导航{
宽度：100%；
高度：72px；
位置：绝对位置；
底部：0；
背景：蓝色；
}
我已将元素偏移量的计算移到了滚动之外，只需计算一次即可。通过这样做，它不会在每次滚动时干扰奇怪的计算，而且它修复了闪烁


var navOffset=$（'.main nav'）.offset（）.top；
$（文档）.on（“滚动”，函数（）{
var bodyTop=$（'body'）。scrollTop（）；
$（“.main nav”）.toggleClass（“表头固定”，（车身顶部>导航偏移量））；
});
.wrapper{
高度：99000px；
}
.收割台固定{
位置：固定！重要；
顶部：0！重要；
背景：黄色！重要；
}
.主导航{
宽度：100%；
高度：72px；
位置：绝对位置；
底部：0；
背景：蓝色；
}

为什么不使用
位置：固定？每次启动scroll事件时，您都要切换该类。你只想添加它，而不是切换它。当我尝试添加类和删除类时，当我在屏幕@StephenWidomPossible replicate of@Draco18s上时，删除类不起作用。你能解释一下吗？我正在使用positionfixed in.header fixed（这个类是在我在第一个全屏部分之后滚动时添加的）为什么不使用
position:fixed？每次启动scroll事件时，您都要切换该类。你只想添加它，而不是切换它。当我尝试添加类和删除类时，当我在屏幕@StephenWidomPossible replicate of@Draco18s上时，删除类不起作用。你能解释一下吗？我正在使用positionfixed in.header fixed（这个类是在我在第一个全屏部分之后滚动时添加的），很高兴我能提供帮助。祝你好运！这是一个完美的答案。不过，这很容易。你可以整天盯着这些bug，但除非你在滚动循环中执行类似console.log这样的操作，并观察元素的偏移量跳跃，否则你可能无法捕捉到它。很高兴我能提供帮助。祝你好运！这是一个完美的答案。不过，这很容易。你可以整天盯着这些bug，但是除非你在滚动循环中做一些类似console.log的事情，并观察元素的偏移量跳跃，否则你可能无法捕捉到它。