如何基於導航欄高度計算身體填充？

Question

創建ASP.NET MVC應用程序時，它會自動生成一個默認導航欄佈局，其左上角有幾個菜單項，右上角有一個「登錄」菜單項。

默認情況下，頁面內容在導航欄後面開始。正如許多帖子所建議的，罪魁禍首是類navbar-fixed-top和一個必須添加padding-top爲body風格在您的站點特定的CSS文件。

我選擇了一個合適的頂部填充尺寸，它看起來很完美。

當您開始縮短桌面上瀏覽器的寬度時，會出現問題。在某一點上，「登錄」菜單項會翻到下一行。我指定的填充大小不再有效。

我想知道是否有辦法根據導航欄高度動態設置填充大小。或者，也許有一種方法可以根據導航欄的當前狀態定義兩種不同的填充尺寸？希望我可以在我的site.css文件或我的主佈局文件中應用這個技巧，這樣我就不需要修改每個頁面。問候。

Answer 1

這是我的代碼來解決同樣的問題，我不知道如果我保留它，也許它可以幫助你。

(function ($) { 

    var lastNavBarHeight = 100; 

    checkSize(); // init 
    $(window).resize(checkSize); 

    // changes size of padding to the nav.navbar when responsive changes are fired 
    function checkSize() { 
     var navHeight = $("nav.navbar").height(); 

     if (navHeight !== lastNavBarHeight) { 
      $("body").css("padding-top", navHeight + "px"); 
      lastNavBarHeight = navHeight; 
     } 
    } 
}(jQuery));