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

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

http://pastebin.com/CBvGcKT4

我的方法是将填充顶部推到主体。导航块是固定的，所以它不会"物理"干扰任何东西，这意味着它不会把你的内容推到它下面。

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

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

每次页面加载后，获取高度并将其传递到主体的填充顶部是一个故障安全的解决方案，因此，如果菜单元素较多，并且菜单有两行或更多行，则内容将紧随其后。

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

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

让他们自己变魔术。

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

因此，在您将代码放入body check引导程序文档中之后，因为它已经有了固定导航栏的类，在这里您可以编写自己的类。

然后我建议把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>

此代码将非常适合您
快乐编码：-）

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

相关内容

最新更新

热门标签：