javascript - 如果它在滚动时改变高度，我该如何修复原始标题下的 div？

Question

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

我一直在尝试:

 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

检查滚动事件中主标题的高度。每次滚动事件触发时，它都会重新检查高度。然后，下一行将调整下页眉的上边距以匹配上页眉的高度。此处的 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'),
}
  });