w3 css w3-navbar,带有w3-top隐藏页面内容

时间:2016-12-05 11:44:23

标签: css html5

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块那样容易出错。

但它仍然相当笨重,我只是想知道我是否有一种更简单的方法。

this one之类的其他问题,如果没有w3css具体建议使用固定边距跳过固定工具栏但我无法看到如何使用响应式导航栏确定此边距高度。

0 个答案:

没有答案