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函数将执行$（＆＃34;＃secondary-nav＆＃34;）removeClass（＆＃34;粘＆＃34）。因此，您的导航栏变得不固定，当然它的偏移变为另一个值，该值不会等于scrollTop（将是377.98213896484367）。

在下次举行活动时，scrollTop为1070.8572，导航栏偏移为377.98213896484367，您的checkStickyMenu将执行$（＆＃34;＃secondary-nav＆＃34;）。addClass（＆＃34; sticky＆＃34;），它与scrollTop为1067.4286（导航栏已修复）时相同。

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

错误的.offset（）。报告的最高值

1 个答案: