如何在我的原始標題下修正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'), 
} 
    });