javascript - 报告了错误的 .offset().top 值

Question

在一个页面中，我有几个部分，在第一部分和第二部分之间我有一个导航栏菜单，当它到达顶部时，它会触发一个将其固定到顶部的功能。通过计算每次滚动的偏移量可以正常工作，除了有时会报告错误的值并且导航栏开始闪烁。

这是自定义类.css:

.sticky {
position: fixed;
top: 0;}

和自定义 .js

var checkStickyMenu = function() {
    if ($(window).scrollTop() > $("#secondary-nav").offset().top ){ 
$("#secondary-nav").addClass("sticky")
} 
else { 
if ($("#secondary-nav").hasClass("sticky")){
$("#secondary-nav").removeClass("sticky");
}}}
$(window).on("scroll", function() {
checkStickyMenu();
console.log("scroll " + "win scroll: " + $(window).scrollTop() + " secnav: " + $("#secondary-nav").offset().top);
})
checkStickyMenu();

console.log() 给出

custom.js:16  scroll win scroll: 1010.8571 secnav: 377.98209999999995
custom.js:16 scroll win scroll: 1011.4286 secnav: 1011.4286
custom.js:16 scroll win scroll: 1018.8571 secnav: 377.98209999999995
custom.js:16 scroll win scroll: 1031.4286 secnav: 1031.4286
custom.js:16 scroll win scroll: 1053.1428 secnav: 377.9820333984376
custom.js:16 scroll win scroll: 1067.4286 secnav: 1067.4286
custom.js:16 scroll win scroll: 1070.8572 secnav: 377.98213896484367
custom.js:16 scroll win scroll: 1071.4286 secnav: 1071.4286

如您所见，它从 377(正确值)跳到 10XX(不正确)，使得导航栏删除了类。

Answer 1

让我们检查滚动事件的引发，尤其是控制台日志中的最后 3 行:

当 scrollTop 为 1067.4286 且导航栏偏移量为 1067.4286 并且我们将 scrollTop 滚动到 1070.8572 时，导航栏也将为 1070.8572(因为它是固定的)，您的 checkStickyMenu 函数将执行 $("#secondary-nav")。 removeClass(“粘性”)。因此，您的导航栏变得不固定，并且它的偏移量当然会更改为另一个值，该值将不等于预期的 scrollTop(将是 377.98213896484367)。

在下一次提升事件中，scrollTop 为 1070.8572，navbar 偏移量为 377.98213896484367，您的 checkStickyMenu 将执行 $("#secondary-nav").addClass("sticky")，它变得与 scrollTop 时相同是 1067.4286(导航栏是固定的)。

因此，它只会永远重复。问题出在你错误的算法上。