固定导航栏分解并覆盖内容答案

【问题标题】：Fixed navbar breaks up and covers content固定导航栏分解并覆盖内容
【发布时间】：2016-09-04 17:23:23
【问题描述】：

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

【问题讨论】：

【解决方案1】：

此代码非常适合您。
快乐编码 :-)

@charset "utf-8";
/* CSS Document */
#TITLE {color: #1762a1; font-family: "Cuprum", sans-serif; font-size:80px;}

.navbar-nav li a{color: white ! important; font-family: "Cuprum", sans-serif; }
.navbar-brand{color: white ! important;}

BODY{PADDING-TOP: 50px;}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Drones</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Cuprum:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="btt index.js"></script>
<link rel="stylesheet" href="indexCSS.css" />

  <nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
      <a class="navbar-brand" href="#">Kittatinny's Drone Information</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li><a href="index.html">Home</a></li>
    <li><a href="What Are Drones.html">What Are Drones</a></li>
    <li><a href="How Drones Work.html">How Drones Work</a></li>
    <li><a href="Buying a Drone.html">Buying a Drone</a></li>
    <li><a href="About Us.html">About Us</a></li>
      </ul>
    </div>
  </div>
</nav>
  <h1 id="TITLE" class="text-center"> Kittatinny's Drone Information</h1>
</head>

【讨论】：

【解决方案2】：

首先你应该修复你的代码。
你在head标签内设置h1和nav这是错误的，它应该进入body内。
检查哪些元素进入了head标记访问此页面：http://www.w3schools.com/tags/tag_head.asp

因此，在您将该代码放入正文后检查引导文档，因为它已经有 fixed navbar 的类，在这里您可以编写自己的。

然后我建议将 h1 标题放在导航栏下方，而不是现在的上方，以便代码与元素的视觉位置相匹配。
而且，就像在固定顶部导航栏的引导文档中所说的那样，如果您使用 .navbar-fixed-top，则应该将 padding-top 添加到您的正文中。
默认情况下，导航栏的高度为 50 像素，但因为您增加了它，所以将更多的 padding-top 添加到正文中。

你的链接也是这样的：

<li><a href="What Are Drones.html">What Are Drones</a></li>

在大多数情况下这不起作用，因此您应该从 html 文件名中删除空格。
例如：

<li><a href="what-are-drones.html">What Are Drones</a></li>

【讨论】：

【解决方案3】：

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

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

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

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

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

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

让他们自己施展魔法。

【讨论】：