导航不会粘在顶部，宽度小于1025px

Question

我正在使用Wordpress和Foundation来构建网站。我有一个导航栏，一旦它到达窗口顶部，我想将其固定到页面顶部。但是，导航不会在宽度小于1025px的情况下粘在顶部，而且我没有收到任何控制台错误。这是我的jQuery：

jQuery(document).ready(function($) {
  var distance = $('.mainContent').offset().top

  $(window).scroll(function() {
    if ($(window).scrollTop() >= distance) {
      $("#nav_bar").addClass("fixedtop");
    } else  {
      $("#nav_bar").removeClass("fixedtop");
    }
  })
});

CSS

.fixedtop {
position: fixed;
top: 0;
z-index: 999;
margin-bottom: 30px;
}