html - 固定导航栏分解并覆盖内容

Question

当我尝试使用固定的导航栏代码滚动时，该栏只分解为链接框并覆盖了页面标题，我该如何解决这个问题？我所有的代码都在一个 pastebin 中，因为直接发布在这里太长了。

http://pastebin.com/CBvGcKT4

Answer 1

我的方法是将 padding-top 推到 body 上。导航 block 是固定的，因此它不会“物理上”干扰任何东西，这意味着它不会将您的内容推到它下面。

我看到你在使用 jQuery，所以我们可以使用它:

<script type="text/javascript">
    $(document).ready(function() {
        var navHeight = $('#nav').height();
        $('body').css("padding-top", navHeight);
    });
</script>

获取高度并在每次页面加载后将其传递给 body 的 padding-top 是一种故障安全解决方案，因此如果您的菜单元素更多并且菜单有两行或更多行，内容将紧随其后之后。

要使此解决方案正常工作，您需要删除您输入的固定高度:

#nav, .fixed-nav-bar {
    height: auto;
}

让他们自己施展魔法。