W3 CSS W3-導航欄與W3-頂部隱藏頁面內容

Question

使用w3css與固定導航欄（即封閉在一個帶班W3-頂部）我怎麼能知道導航欄（這將屏幕大小而異）的高度，我可以將這麼多空間留在我的非固定內容的頂部，因此導航欄不會覆蓋內容？

到目前爲止，我的最佳解決方案是在JavaScript中複製導航欄，並在頁面頂部插入不帶w3-top類的頁面，以便在頁面頂部始終具有相同大小的隱藏元素。

... 
<div id="pinned_nav" class="w3-top"> 
<ul class="w3-navbar w3-light-grey w3-border"> 
    <li> 

... 


<script type="text/javascript"> 
    //Duplicate the nav without pinning it to the top - this means that the other content will adjust to height of pinned nav 
    var nav = document.getElementById("pinned_nav"); 
    var nav_copy = nav.cloneNode(true); 
    nav_copy.classList.remove("w3-top"); 
    nav.parentElement.insertBefore(nav_copy, nav); 
</script> 

... 

因爲這看起來不像複製和粘貼HTML塊那麼容易出錯。

但它仍然相當笨重，我只是想知道是否有一個更簡單的方法，我錯過了。

其他問題，如this one不是w3css特定建議使用固定邊距來跳過固定的工具欄，但我看不到如何使用響應式導航欄確定此邊距高度。

Answer 1

您可以使用JavaScript腳本來獲取高度並追加它，但是您想使用它。

function getHeight() { 
 
    var nav = document.getElementById("pinned_nav"); 
 
    var nav_height = nav.offsetHeight; //append this var where you need to. 
 
    alert(nav_height); 
 
}; 
 

 
window.onload = getHeight(); 
 
window.onresize = getHeight(); //edit, added for if you resize the page

#pinned_nav { 
 
    height: 100px; 
 
    /*as example */ 
 
    background-color: red; 
 
}

<div id="pinned_nav" class="w3-top"></div>

EDT

新增調整事件訂閱。