Javascript 粘性菜单没有'；不尊重调整大小

我有一个响应性很强的网页，还有一个位于页面中间的粘性菜单。当我滚动并且菜单到达顶部时，它就固定下来了。这很好，问题是当我调整菜单上方内容的大小时，菜单当然会变得不那么高，所以当我再次向后滚动时，当我到达顶部时，菜单不会变粘，因为它仍然认为上面的内容与调整大小之前处于同一级别，并且没有注意到内容已调整大小。因此，菜单在到达顶部时不会变粘，除非它远远超过顶部。需要几分钟才能变粘。如果我刷新浏览器，此问题不会显示，它只在我调整大小时显示。我想知道是否有任何解决方案的菜单尊重的大小？这是我的代码：

<header>
  <nav>
    <ul>
      <li>
        <a href='#about'>
          About
        </a>
      </li>
      <li>
        <a href='work.html'>
          Work
        </a>
      </li>
      <li>
        <a href='#services'>
          Services
        </a>
      </li>
      <li>
        <a href='#contact'>
          Contact
        </a>
      </li>
    </ul>
  </nav>
</header>


    header {
      background-color: white;
      border-bottom: 1px solid #eaeaea;
      /*  box-shadow: 1px 0 2px 1px rgba(0, 0, 0, 0.2);*/
      padding: .5em 0;
    }
    header h1 {
      display: none;
    }
    header ul {
      text-align: center;
    }
    header ul li {
      display: inline-block;
    }
    header ul li a {
      padding: 1.08em 0.3em;
      text-transform: uppercase;
      color: #01486b;
      font-size: .8em;
      font-weight: 300;
    }
    header ul li a:hover {
      color: #139ee3;
    }
    .padding
    {
      padding: 3.61em 0 0 0;
    }



      function navigate(e) {
        var element = $(this).attr('href');
        var where = $(element).offset().top-71.5;
        $('html, body').animate({scrollTop:where},1000,'swing');
        e.preventDefault();
      }
      $('nav a').on('click', navigate);



      var offset = $('header').offset().top;
      function changeClass(e) {
        var countScroll = $('html').scrollTop() || $('body').scrollTop();
        if (countScroll >= offset) {
          $('header').addClass('fixed_menu');
          $('main').addClass('padding');
        } else {
          $('header').removeClass('fixed_menu');
          $('main').removeClass('padding');
        }
        e.preventDefault();
      }
      $(document).on('scroll',changeClass);

标题{
背景色：白色；
边框底部：1px实心#eaeaea；
/*盒影：1px02px1pRGBA（0,0,0,0.2）*/
填充：.5em0；
}
收割台h1{
显示：无；
}
标题ul{
文本对齐：居中；
}
标题ulli{
显示：内联块；
}
标题ulli a{
填充：1.08em 0.3em；
文本转换：大写；
颜色：#01486b；
字体大小：.8em；
字体大小：300；
}
标题：悬停{
颜色：139ee3；
}
衬料
{
填充：3.61em 0；
}
功能导航（e）{
var元素=$（this.attr（'href'）；
其中变量=$（元素）.offset（）.top-71.5；
$（'html，body'）.animate（{scrollTop:where}，1000，'swing'）；
e、 预防默认值（）；
}
$（'nav a'）。在（'click'，navigate'）上；
var offset=$（'header'）.offset（）.top；
函数类（e）{
var countScroll=$（'html'）.scrollTop（）| |$（'body'）.scrollTop（）；
如果（计数滚动>=偏移量）{
$（'header'）.addClass（'fixed_menu'）；
$（'main'）.addClass（'padding'）；
}否则{
$（'header'）.removeClass（'fixed_menu'）；
$（'main'）.removeClass（'padding'）；
}
e、 预防默认值（）；
}
$（文档）.on（'scroll'，changeClass）；

使用：

var countScroll = $('body').scrollTop();

而不是

var countScroll = $('html').scrollTop() || $('body').scrollTop();

---

请提供一个fiddle重新计算您在事件处理程序中的位置。请您说得更具体一点，我是jquery新手，所以我不知道在哪里可以找到窗口。onresize在我的代码上是一样的，除非我尝试过，但根本不起作用，这不是问题。您可以在这里添加演示的任何链接。