Html Bootstrap 3 - 如何使导航栏在滚动时具有粘性

Bootstrap 3 - How do I make the nav bar sticky on scroll

提问by Alexander Staroselsky

What I am trying to do is make the nav bar stay at the top of the page when you scroll past it. As I am quite new to JavaScript I looked a few tutorials, however, none of them really worked with the Bootstrap nav bar. I was just wondering if there was a way to do this so that it works with the Bootstrap columns.

我想要做的是让导航栏在您滚动浏览时停留在页面顶部。因为我对 JavaScript 还很陌生，所以我看了一些教程，但是，它们都没有真正与 Bootstrap 导航栏一起使用。我只是想知道是否有办法做到这一点，以便它与 Bootstrap 列一起使用。

Also how could I make it so that while it's scrolling, the background colour starts to fade in?

另外我怎样才能让它在滚动时背景颜色开始淡入？

Here is the HTML code for the nav bar, in case that helps:

这是导航栏的 HTML 代码，以防万一：

   <div class="container">
    <nav class="navbar navbar-default" id="mNavbar">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false" id="toggle">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li><a href="#">Home</a></li>
            <li><a href="#section2">Services</a></li>
            <li><a href="#section3">Contact</a></li>
          </ul>
        </div>
      </div>
    </nav>
  </div>

回答by Alexander Staroselsky

Bootstrap 3 has a class .navbar-fixed-topthat can be applied to navelement to fixed to top of page. It works with all basic navbar functionality at different screen sizes. There is an example as part of the official documentation.

Bootstrap 3 有一个类.navbar-fixed-top可以应用于nav固定到页面顶部的元素。它适用于不同屏幕尺寸的所有基本导航栏功能。官方文档中有一个示例。

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

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

If you need it to become sticky at a certain amount of px from top of screen then you you'd need to attach a scroll event handler to the page. You would then check the distance the page has been scroll then apply the fixed nav class or set styling to fix to a specific position. Something like this:

如果您需要它在距屏幕顶部一定 px 处变得粘稠，那么您需要将滚动事件处理程序附加到页面。然后，您将检查页面滚动的距离，然后应用固定导航类或设置样式以固定到特定位置。像这样的东西：

$(document).ready(function() {
  var $navbar = $("#mNavbar");
  
  AdjustHeader(); // Incase the user loads the page from halfway down (or something);
  $(window).scroll(function() {
      AdjustHeader();
  });
  
  function AdjustHeader(){
    if ($(window).scrollTop() > 60) {
      if (!$navbar.hasClass("navbar-fixed-top")) {
        $navbar.addClass("navbar-fixed-top");
      }
    } else {
      $navbar.removeClass("navbar-fixed-top");
    }
  }
});

body{
  position: relative;
  display: block;
  height: 1000px;
  overflow-y: scroll;
}

.navbar{
  top: 60px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <nav class="navbar navbar-default" id="mNavbar">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false" id="toggle">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>

      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li><a href="#">Home</a>
          </li>
          <li><a href="#section2">Services</a>
          </li>
          <li><a href="#section3">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</div>

I'm not sure what you mean by padding is being added to top and bottom, but you can just override the CSS by adding .navbar-fixed-topto your stylesheet after the Bootstrap version and updating the padding values. There could be a topCSS value that is moving the navbar away from top of screen, you can resolve that by setting topto 0.

我不确定您所说的将填充添加到顶部和底部是什么意思，但是您可以通过.navbar-fixed-top在 Bootstrap 版本之后添加到样式表并更新填充值来覆盖 CSS 。可能有一个topCSS 值将导航栏从屏幕顶部移开，您可以通过设置top为0.

回答by red security

to make it scroll down add navbar-fixed-top to your nav tag the catch here is that it will be stuck to the top of the page like so

为了使它向下滚动，将 navbar-fixed-top 添加到您的导航标签中，这里的问题是它会像这样卡在页面顶部

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

https://jsfiddle.net/nyd7sd1q/

https://jsfiddle.net/nyd7sd1q/