scrollTop位置在向下滚动时被向下滚动时不一致

几天来我一直在努力解决这个问题,所以我在这里寻求帮助。

The Goal:目标是在滚动窗口位置达到div位置后,将一个类简单地添加到div中。正常工作,直到出现“问题”

问题:重新加载页面(非常顶部之外的任何位置)时,位置计算似乎不正确。当页面稍微滚动时,计算似乎并不接近。

$(window).load(function(){
     var subnavPos = document.getElementById("secondaryNav").getBoundingClientRect().top;
     var topnavPos = document.getElementById("fullDnav").getBoundingClientRect().bottom;
     console.log(subnavPos);
     $(window).scroll(function() {

       var scroll = $(window).scrollTop() + 66;

       console.log(scroll);
       console.log(subnavPos);

       if (scroll >= subnavPos) {
         secondaryNav.classList.add("sticky");
       } else {
         secondaryNav.classList.remove("sticky");
       }

     })
   });
回答如下:

重写下面的脚本,现在可以正常运行

var stickMe = $('#secondaryNav').offset().top;
    $(window).scroll(function(){
      var currentPos = $(window).scrollTop() + 66;
      if (currentPos >= stickMe) {
        $('#secondaryNav').addClass("sticky");
      } else {
        $('#secondaryNav').removeClass("sticky");
      }
    });

scrollTop位置在向下滚动时被向下滚动时不一致

几天来我一直在努力解决这个问题,所以我在这里寻求帮助。

The Goal:目标是在滚动窗口位置达到div位置后,将一个类简单地添加到div中。正常工作,直到出现“问题”

问题:重新加载页面(非常顶部之外的任何位置)时,位置计算似乎不正确。当页面稍微滚动时,计算似乎并不接近。

$(window).load(function(){
     var subnavPos = document.getElementById("secondaryNav").getBoundingClientRect().top;
     var topnavPos = document.getElementById("fullDnav").getBoundingClientRect().bottom;
     console.log(subnavPos);
     $(window).scroll(function() {

       var scroll = $(window).scrollTop() + 66;

       console.log(scroll);
       console.log(subnavPos);

       if (scroll >= subnavPos) {
         secondaryNav.classList.add("sticky");
       } else {
         secondaryNav.classList.remove("sticky");
       }

     })
   });
回答如下:

重写下面的脚本,现在可以正常运行

var stickMe = $('#secondaryNav').offset().top;
    $(window).scroll(function(){
      var currentPos = $(window).scrollTop() + 66;
      if (currentPos >= stickMe) {
        $('#secondaryNav').addClass("sticky");
      } else {
        $('#secondaryNav').removeClass("sticky");
      }
    });