粘性引导导航栏不起作用

Question

I have a navbar for a little test site I am working on and I need some help with it.我有一个用于我正在处理的小测试站点的导航栏，我需要一些帮助。 I am using Bootstrap (as you can probably tell) but cannot figure out how to make my navbar stick to the top of the screen as you scroll down.我正在使用 Bootstrap（正如您可能知道的那样），但无法弄清楚如何在您向下滚动时使我的导航栏粘在屏幕顶部。 I would like the navbar to stay beneath the jumbotron until you scroll to the point where it would normally go off the screen.我希望导航栏停留在超大屏幕下方，直到您滚动到它通常会离开屏幕的位置。 When it starts to go off the screen I would like it to stay at the top of the screen but go back up when necessary.当它开始离开屏幕时，我希望它停留在屏幕顶部，但在必要时返回。 I have tried different code in JQuery files such as :我在 JQuery 文件中尝试了不同的代码，例如：

$('.navbar-default').affix({
  offset: {
    top: 50
  }
    });

If anybody is able to help, it would be much appreciated.如果有人能够提供帮助，将不胜感激。

Below is my HTML Code下面是我的 HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>

  <title>Hope's Seed</title>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="JS/style.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link href="CSS/style.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">

</head>
<body>
<div class = "header">
  <div class="jumbotron text-center">
    <h1>Hope's Seed</h1>
    <p>You're Not Alone</p>
  </div>
</div>  

<nav class="navbar navbar-default">
  <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>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Sponsors</a></li>
        <li><a href="#">Donate</a></li>
        <li><a href="#">Photos</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Events</a></li>
        <li><a href="#">Blog</a></li>
      </ul>
    </div>
  </div>
</nav>

<div class="bg">
  <div class="container-fluid">
    <div class="row">
      <img class="img-responsive" src="Images/plantgrow.jpg">
    <div>
  </div>
</div>

</body>
</html>

My CSS Code (there are likely some redundancies, I haven't gone back and cleaned it up yet):我的 CSS 代码（可能有一些冗余，我还没有回去清理它）：

.header .jumbotron {
    color:#fff;
    background-color:#a1ff7c;
    font-family:Roboto Condensed;
    margin-bottom:0px;
}

.navbar-default {
    background-color: #78c45a;
    border: 0px;
    font-family:Roboto Condensed;
    margin-bottom:0px;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus {
    color: white; /*BACKGROUND color for active*/
    background-color: #78c45a;
}

.navbar-default .navbar-nav > .active > a:hover{
    background-color: #5a9344;
    color: #fff;
}

.navbar-default .navbar-nav > li > a {
  color: #fff;
}

.navbar-default .navbar-nav > li > a:hover {
  color: #fff; 
  background-color: #5a9344;
}

.navbar-default .navbar-brand {
    color: #fff;
}

.navbar-default .navbar-brand:hover {
    background-color:#5a9344;
    color: #fff;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #fff;
}

.navbar-default .navbar-toggle {
    border: 0px;
}

.navbar-default .navbar-toggle:hover {
    background-color:#5a9344;;
}

p {
    font-family: Roboto Condensed;
}

.bg .img-responsive {
    width:100%;
    height:auto;
}

.jumbotron {
    padding-top:1%;
    padding-bottom:1%;
}

.jumbotron h1 {
    margin-top:0px;
}

.jumbotron p {
    margin-bottom:0px;
}

.navbar-nav {
    display:table;
    width:100%;
    margin: 0;
}
.navbar-nav > li {
    float:none;
    display:table-cell;
    text-align:center;
}

.container-fluid{
    padding-left:0px;
    padding-right:0px;
}

#myNavbar{
    padding-left:0px;
    padding-right:0px;
}

Answer 1

To use a fixed Bootstrap navbar , all you need to do is give the navbar a class of navbar-fixed-top :要使用固定的 Bootstrap navbar ，您需要做的就是给导航栏一个navbar-fixed-top ：

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

I'm assuming you also want your green custom header to stick to the top of the screen, above the navbar.我假设您还希望您的绿色自定义标题贴在屏幕顶部，导航栏上方。 You'll also need to give the same class to that, in conjunction with giving the navbar a top offset equal to the height of the custom header:您还需要为此提供相同的类，并为导航栏提供等于自定义标题高度的top偏移量：

<div class="header navbar-fixed-top">

.navbar.navbar-default {
  top: 155px;
}

I've created a fiddle showcasing this here .我在这里创建了一个小提琴来展示这一点。

Hope this helps!希望这可以帮助！ :) :)

粘性引导导航栏不起作用

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-03-24 01:23:25

粘性引导导航栏不起作用

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-03-24 01:23:25

解决方案1
1 已采纳 2017-03-24 01:23:25