如何在我的原始标题下修正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

检查滚动事件内主标题的高度。每次滚动事件触发时，都会重新检查高度。然后，下一行将调整下部标题的上边距以匹配上部标题的高度。此处的上边距取代您的位置方法。

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'), 
} 
    });