报告了错误的 .offset().top 值答案

【问题标题】：Wrong .offset().top value reported报告了错误的 .offset().top 值
【发布时间】：2015-01-14 05:27:38
【问题描述】：

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

这是自定义类 .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（不正确），从而使导航栏删除了该类。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

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

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

在下一次引发事件时，scrollTop 为 1070.8572，navbar 偏移量为 377.98213896484367，您的 checkStickyMenu 将执行 $("#secondary-nav").addClass("sticky")，它与滚动顶部时相同是 1067.4286（导航栏是固定的）。

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

【讨论】：