Question

我为响应式网站编写了一个非常简单的jQuery脚本，允许topnav成为＆＃34; sticky＆＃34;滚动浏览其位置时。（You can see it working here.）它还在主体的上边缘添加/移除stickynav的高度，并在菜单固定时添加/移除突然跳跃的另一个元素。这是代码：

$(document).ready(function() {
  var theLoc = $('nav#menu').position().top;
  var navHeight = $('nav#menu').height();
  $(window).scroll(function() {
    if(theLoc >= $(window).scrollTop()) {
      if($('nav#menu').hasClass('fixed')) {
        $('nav#menu').removeClass('fixed');
        $('body').css('margin-top', '0');
        $('nav#hidden-menu').css('margin-top', '0');
      }
    } else { 
      if(!$('nav#menu').hasClass('fixed')) {
        $('nav#menu').addClass('fixed');
        $('body').css('margin-top', navHeight);
        $('nav#hidden-menu').css('margin-top', -navHeight);
      }
    }
  });
});

问题是，stickynav的高度会根据窗口的大小而变化。（它完全缺席，宽度小于768px，小于768-1280，大于1280和更大。）但是，navHeight变量保留与页面首次加载时相同的值 - 所以如果你加载页面，调整窗口大小以使导航高度发生变化，然后向下滚动导航，脚本将不再按预期工作。

我如何以调整窗口大小时navHeight变量更新的方式编写？我尝试将var声明直接放在脚本中调用之前，希望无论何时调用它都会更新值，但这并不起作用。

Answer 1

添加一个窗口调整大小处理程序，用于更新navHeight的值。

示例：

$(document).ready(function() {
    var theLoc = $('nav#menu').position().top;
    var navHeight = $('nav#menu').height();

    ...

    $(window).resize(function() {
        navHeight = $('nav#menu').height();
    });
});

如何在检索之前更新jQuery变量

1 个答案: