Javascript 在我的响应式设计布局中使用锚定功能修复固定标题中的错误

上面的链接是我的响应式设计布局

固定收割台的高度可根据pc、平板电脑和手机版本进行调整。出于同样的原因，锚定功能是从固定头调整的。锚函数中有一个bug。当我缩小web浏览器的宽度时，标题会变得更高。锚定功能不是自动工作的，我需要单击F5刷新web以激活该功能。如何修复该错误

下面是我的css和js编码：

    var menuContainer = $('header').height();

function scrollToAnchor(anchorName) {
  var aTag = $("div[name='" + anchorName + "']");
  $('html,body').animate({
    scrollTop: aTag.offset().top - menuContainer
  }, 'slow');
  console.log(anchorName);
}

css编码

#subnav {
    height: 100%;
    margin-right: auto;
    width: 100%;
    background-color: #FFFFFF;
    font-size: 120%;

}
#submenu ul {
    padding: 0;
    margin-top: 4px;
    margin-right: auto;
    margin-left: 0%;
    margin-bottom: 0;
    width: 650px;
}
#submenu li {
    float: left;
}
#submenu li a {
    display: inline-block;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    border-right: 1px solid #294C52;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.submenu-active {
    background-color: #294C52;
    color: #FFFFFF; 
}
a {
  color: #294C52;
}

试试这个：

var menuContainer = $('header').height();

function scrollToAnchor(anchorName) {
  var aTag = $("div[name='" + anchorName + "']");
  $('html,body').animate({
    scrollTop: aTag.offset().top - menuContainer
  }, 'slow');
  console.log(anchorName);
}

$(window).on('resize', function(event) {
   menuContainer = $('header').height();
});

---

现在取决于调用函数的时间，它应该可以工作。如果希望它在调整大小时自动工作，请调用事件处理程序中的函数。

使用

resize

事件侦听器，并将其放置在

menuContainer=$（'header'）.height（）中。这样，当用户调整窗口大小时，每次都会计算页眉高度。你能给我一个答案吗？试试我的答案，如果不起作用，告诉我到底发生了什么。