如果 div 在我原来的 header 下滚动时改变了高度，我该如何修复它？

Question

我创建了一个额外的菜单栏 (.secondnav)，我想将其放在网站中原始 header (#headAnnouncementWrapper) 的正下方。问题是，滚动时，header 的高度从相对位置变为固定在顶部时会发生变化，在移动设备上也会发生变化。

我一直在尝试这个：

 var scrolled = 78;
   var headHeight = $('#headerAnnouncementWrapper').height();
$(window).scroll(function() {
if ($(window).scrollTop() > scrolled) {
  $('.secondnav').css('position', 'fixed');
  $('.secondnav').css('top', headHeight);
} else {
  $('.secondnav').css('position', 'relative'),
  $('.secondnav').css('top', headHeight);
}
  });

但我不知道我应该如何计算 headHeight 变量以便它随着高度的变化而变化，以及如何使用该结果作为 .secondnav 的最高值css.

Answer 1

检查滚动事件中主要 header 的高度。每次滚动事件触发时，它都会重新检查高度。然后，下一行将调整下方 header 的上边距以匹配上方 header 的高度。 Top-margin这里替换你的位置方法。

var scrolled = 78;

$(window).scroll(function() {
    var headHeight = $('#headerAnnouncementWrapper').height();
   $('.secondnav').css('marginTop', headHeight);
if ($(window).scrollTop() > scrolled) {
  $('.secondnav').css('position', 'fixed');
} else {
  $('.secondnav').css('position', 'relative'),
}
  });

如果 div 在我原来的 header 下滚动时改变了高度，我该如何修复它？

How can I fix a div under my original header if it changes height when scrolling?

javascript

css

jquery

fixed