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

Question

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

Answer 1

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

我看到你在使用 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;
}

让他们自己施展魔法。

Answer 2

首先你应该修复你的代码。
你在 head 标签内设置了 h1 和 nav 但这是错误的，它应该在 [=15= 内].
要检查 head 标签中包含哪些元素，请访问此页面：http://www.w3schools.com/tags/tag_head.asp

因此，在您将该代码放入 body 之后，请检查 bootstrap 文档，因为它已经为 fixed navbar 提供了 class，您可以在此处编写自己的代码。

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

您的链接也如下所示：

<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>

Answer 3

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

@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>

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

Fixed navbar breaks up and covers content

html

css

navbar

twitter-bootstrap