导航栏引导网站答案

【问题标题】：Navbar bootstrap website导航栏引导网站
【发布时间】：2017-07-05 22:25:33
【问题描述】：

我正在尝试使用引导程序创建一个网站，我希望它在顶部和导航栏上有一个标题，如果滚动，当我移动到我想查看的其他页面时，我的导航栏固定为第一页上显示的标题只有导航栏固定在顶部，我所有的导航栏链接都在同一页面上我的代码是

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Urbanic Home</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <div class="fad-top-bar"  id="fad-top">
      <div class="container">
      <div class="top">
        <div class="pull-left" id="phone">
          <img src="img/phone.png" alt="phone">
          00000000000
        </div>
        <div class="pull-right" id="email">
          <img src="img/email.png" alt="email">
          @outlook.com
        </div>
        </div>
      </div>
    </div>

    <div class="fad-top-menu">
      <div class="container">
        <nav class="navbar navbar-default" role="navigation">
          <div class="navbar-header">
            <button type="button" class=" collapsed navbar-toggle" data-toggle="collapse" data-target="#myNavbar" aria-expanded="false" aria-controls="myNavbar">
              <span class="sr-only">Toggle Navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand"><img src="img/logo.png" alt="Urbanic Fadsoft Investments" title="Urbanic Fadsoft Investments"></a>    
          </div>
          <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav navbar-right" style="margin-top: 25px;">
              <li class="active"><a href="#fad-top">HOME</a></li>
              <li><a href="#fad-about">ABOUT</a></li>
              <li><a href="#fad-portfolio">PORTFOLIO</a></li>
              <li><a href="#fad-blog">BLOG</a></li>
              <li><a rel="follow" href="http://www.facebook.com/fadsoft Investments" 
               class="external-link" target="_parent">EXTERNAL</a></li>
              <li><a href="#fad-contact">CONTACT</a></li>
            </ul>
          </div>
        </nav>
      </div>  
    </div>

【问题讨论】：

您不是针对您遇到的特定问题提出特定问题。 stackoverflow.com/help/asking
引导站点has an example of this.

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

将.navbar-fixed-top 添加到您的nav 标记中，使其固定在顶部。所以在你的代码中改变它。

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

这是文档：navbar-fixed-top

【讨论】：