报告了错误的 .offset(）.top 值

Wrong .offset().top value reported

本文关键字：top offset 错误 报告      更新时间：2023-09-26

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

这是自定义类.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();

控制台.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（不正确），使导航栏删除类。

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

当scrollTop为1067.4286，导航栏

偏移量为1067.4286，我们将scrollTop滚动到1070.8572时，导航栏也将是1070.8572（因为它是固定的），你的checkStickyMenu函数将做$（"#secondary-nav"）.removeClass（"sticky"）。因此，您的导航栏变得不固定，它的偏移量当然会更改为另一个不等于 scrollTop 预期的值（将是 377.98213896484367）。

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

结果，它只是永远重复。问题来自错误的算法。

相关文章：