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

Question

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.

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:

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

Is your nav bar directly at the top of your page? Because maybe you can just use a `position:fixed` nav with no javascript required? — Zze, Jan 19 '17 at 22:35

score 14 · Accepted Answer · edited Mar 21 '20 at 17:13

Bootstrap 3 has a class .navbar-fixed-top that can be applied to nav element 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.

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

$(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-top to your stylesheet after the Bootstrap version and updating the padding values. There could be a top CSS value that is moving the navbar away from top of screen, you can resolve that by setting top to 0.

Good solution unless the nav bar is **not** located at top of screen and they want it to stick once they scroll past it, say halfway down the page or something — Zze, Jan 19 '17 at 22:36
I maybe should have said this is the question. I adapted one of the tutorials, and basically when the window had gone past the top of the navbar, it added the class of `navbar-fixed-top`, however it added padding to the top and bottom. Is there a way to keep the original padding? — , Jan 19 '17 at 22:40
This is the correct answer. However it would be better if this was in a code snippet. — Zze, Jan 19 '17 at 22:45
I added code for detecting scrolling then how to check the scroll position, finally adding/removing the fixed class. You'll need to play around with where you'd want the fixed positioning to start. You may also need to add/remove padding as necessary to meet your specific needs. — Alexander Staroselsky, Jan 19 '17 at 22:46
@AlexanderStaroselsky I swapped your existing code to a snippet. You can learn how to do that here: https://stackoverflow.blog/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/ .. Although this is slightly outdated now (especially the UI). — Zze, Jan 19 '17 at 22:59
@Zze For some reason, this code isn't working for me. The class isn't being added to the navbar. Any ideas? — , Jan 19 '17 at 23:12
@name234 I tweaked the code a little bit. The snippet now better displays Alexander's working example. See if this works for you. — Zze, Jan 19 '17 at 23:33
This works but in my case, I only had the content above the nav on screens larger than md (when menu is not collapsed). Since the js code adds and removes the navbar-fixed-top class based on scroll height, it caused my navbar to disappear for a while and come back after the given amount is scrolled on mobiles. I was able to solve it by adding a condition to the "else" statement so it does not remove the class on small screens: "... } else if ($( window ).width() > 767.98) { ..." — VolkanOzcan, Jun 07 '20 at 21:42

score 0 · Answer 2 · answered Jan 19 '17 at 22:40

0

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

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

https://jsfiddle.net/nyd7sd1q/

answered Jan 19 '17 at 22:40

red security

193
3
14

my solution and alexanders are basically the same. if u want it to be fixed but not to the top in your css do #mNavbar{position:fixed!important;} – red security Jan 19 '17 at 22:42

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

2 Answers2

Linked