css - w3 css w3-navbar with w3-top 隐藏页面内容

Question

使用 w3css使用固定导航栏(即包含在 w3-top 类中)我怎么知道导航栏的高度(随屏幕尺寸而变化)所以我可以在非固定内容的顶部留出这么多空间所以导航栏不会覆盖内容？

到目前为止，我最好的解决方案是在 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 block 更不容易出错。

但它仍然相当笨拙，我只是想知道是否有更简单的方法我错过了。

其他问题如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>

美国东部时间

添加了调整大小事件订阅。