向下滚动时导航栏未固定在顶部

Question

I have been attempting to fix my navbar to the top of the screen when I scroll down but it isn't working. Why is this the case?

Take a look at the bootsnipp: http://bootsnipp.com/snippets/4nqgm

I am attempting to make it look like: http://bootsnipp.com/snippets/featured/navbar-fixed-on-scrolling-with-transition

HTML:

<nav class="navbar navbar-default" role="navigation" id="nav">
  <div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle Navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
      <a class="navbar-brand" href="#">
        <img alt="" src="">
      </a>
    </div>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Projects</li>
            <li><a href="#">Services</li>
            <li><a href="#">About</li>
            <li><a href="#">Contact</li>
        </ul>
    </div>
  </div>
</nav>

<div id="second-section" class="jumbotron">
   <div class="container">
      <br >
        <p class="text-center">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit, neque eget faucibus bibendum, ligula diam gravida risus, sed faucibus felis velit gravida tellus. Phasellus vitae tempor ante, in eleifend eros. Morbi eu felis placerat, convallis orci vitae, rutrum nulla. Integer sed est euismod, tristique diam tincidunt, faucibus ex. Aliquam dui odio, fringilla sit amet nulla eget, vehicula semper ante. Suspendisse commodo felis orci, non ullamcorper ex faucibus ut. Fusce tempus scelerisque justo, pharetra efficitur risus porttitor quis. Vestibulum et tellus ligula.

                Sed molestie iaculis massa, nec ornare justo vehicula ac. Aliquam laoreet nisl volutpat sem sodales vehicula. Donec et porta sem. Vivamus aliquam facilisis ipsum sit amet rutrum. Aliquam lobortis interdum auctor. Aliquam ut vulputate dui. Integer eu blandit erat. Etiam quam ligula, porttitor in porta sit amet, sodales quis magna. Mauris non gravida arcu, id imperdiet metus. Mauris eu viverra justo, quis pretium turpis.

                Mauris laoreet ante et elementum mollis. Nunc tempor nisi id facilisis porttitor. Integer ante metus, ullamcorper at egestas a, vehicula in ligula. Donec sed lacus est. Aenean blandit tincidunt dolor nec lacinia. Praesent finibus turpis ultrices, semper libero at, semper sapien. Morbi molestie ex congue risus porttitor, nec feugiat orci pulvinar.

        </p>
    </div>
</div>

<div id="third-section" class="jumbotron">
   <div class="container">
      <br >
        <p class="text-center">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit, neque eget faucibus bibendum, ligula diam gravida risus, sed faucibus felis velit gravida tellus. Phasellus vitae tempor ante, in eleifend eros. Morbi eu felis placerat, convallis orci vitae, rutrum nulla. Integer sed est euismod, tristique diam tincidunt, faucibus ex. Aliquam dui odio, fringilla sit amet nulla eget, vehicula semper ante. Suspendisse commodo felis orci, non ullamcorper ex faucibus ut. Fusce tempus scelerisque justo, pharetra efficitur risus porttitor quis. Vestibulum et tellus ligula.

                Sed molestie iaculis massa, nec ornare justo vehicula ac. Aliquam laoreet nisl volutpat sem sodales vehicula. Donec et porta sem. Vivamus aliquam facilisis ipsum sit amet rutrum. Aliquam lobortis interdum auctor. Aliquam ut vulputate dui. Integer eu blandit erat. Etiam quam ligula, porttitor in porta sit amet, sodales quis magna. Mauris non gravida arcu, id imperdiet metus. Mauris eu viverra justo, quis pretium turpis.

                Mauris laoreet ante et elementum mollis. Nunc tempor nisi id facilisis porttitor. Integer ante metus, ullamcorper at egestas a, vehicula in ligula. Donec sed lacus est. Aenean blandit tincidunt dolor nec lacinia. Praesent finibus turpis ultrices, semper libero at, semper sapien. Morbi molestie ex congue risus porttitor, nec feugiat orci pulvinar.

        </p>
    </div>
</div>

CSS:

.navbar-default

{

  background-color: #fbfbfb;
}

.navbar-fixed {
    top: 0;
    z-index: 100;
  position: fixed;
    width: 100%;
}

.navbar-nav {
    float:none;
    margin:0 auto;
    display: block;
    text-align: center;
}

.navbar-nav > li {
    display: inline-block;
    float:none;
}

 .navbar-fixed {
    top: 0;
    z-index: 100;
  position: fixed;
    width: 100%;
}

Javascript:

$(document).ready(function() {

  $(window).scroll(function () {
      //if you hard code, then use console
      //.log to determine when you want the 
      //nav bar to stick.  
      console.log($(window).scrollTop())
    if ($(window).scrollTop() > 300) {
      $('nav navbar-nav').addClass('navbar-fixed');
    }
    if ($(window).scrollTop() < 281) {
      $('nav navbar-nav').removeClass('navbar-fixed');
    }
  });
});

Answer 1

The jQuery selector should be..

$('.nav.navbar-nav'). instead of $('nav navbar-nav').

However your example is very different than the other example. You'll also find other animated navbar examples on Bootply .

Answer 2

Or just try this one as JS Code

$(document).ready(function() {
    $('#nav').affix({
        offset: {
            top: $('header').height()
        }
    }); 
});

Answer 3

You just need to fix the way you are trying to target the selector. You have:

$('nav navbar-nav')

Which would target <nav> and <navbar-nav> elements. Replace it with:

$('nav.navbar')

To target <nav> elements with the navbar class.

See this working example:

 $(document).ready(function() { $(window).scroll(function() { //if you hard code, then use console //.log to determine when you want the //nav bar to stick. console.log($(window).scrollTop()) if ($(window).scrollTop() > 300) { $('nav.navbar').addClass('navbar-fixed'); } if ($(window).scrollTop() < 281) { $('nav.navbar').removeClass('navbar-fixed'); } }); }); 

 .navbar-default { background-color: #fbfbfb; } .navbar-fixed { top: 0; z-index: 100; position: fixed !important; width: 100%; } .navbar-nav { float: none; margin: 0 auto; display: block; text-align: center; } .navbar-nav>li { display: inline-block; float: none; } .navbar-fixed { top: 0; z-index: 100; position: fixed; width: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <nav class="navbar navbar-default" role="navigation" id="nav"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"> <img alt="" src=""> </a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Projects</li> <li><a href="#">Services</li> <li><a href="#">About</li> <li><a href="#">Contact</li> </ul> </div> </div> </nav> <div id="second-section" class="jumbotron"> <div class="container"> <br > <p class="text-center"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit, neque eget faucibus bibendum, ligula diam gravida risus, sed faucibus felis velit gravida tellus. Phasellus vitae tempor ante, in eleifend eros. Morbi eu felis placerat, convallis orci vitae, rutrum nulla. Integer sed est euismod, tristique diam tincidunt, faucibus ex. Aliquam dui odio, fringilla sit amet nulla eget, vehicula semper ante. Suspendisse commodo felis orci, non ullamcorper ex faucibus ut. Fusce tempus scelerisque justo, pharetra efficitur risus porttitor quis. Vestibulum et tellus ligula. Sed molestie iaculis massa, nec ornare justo vehicula ac. Aliquam laoreet nisl volutpat sem sodales vehicula. Donec et porta sem. Vivamus aliquam facilisis ipsum sit amet rutrum. Aliquam lobortis interdum auctor. Aliquam ut vulputate dui. Integer eu blandit erat. Etiam quam ligula, porttitor in porta sit amet, sodales quis magna. Mauris non gravida arcu, id imperdiet metus. Mauris eu viverra justo, quis pretium turpis. Mauris laoreet ante et elementum mollis. Nunc tempor nisi id facilisis porttitor. Integer ante metus, ullamcorper at egestas a, vehicula in ligula. Donec sed lacus est. Aenean blandit tincidunt dolor nec lacinia. Praesent finibus turpis ultrices, semper libero at, semper sapien. Morbi molestie ex congue risus porttitor, nec feugiat orci pulvinar. </p> </div> </div> <div id="third-section" class="jumbotron"> <div class="container"> <br > <p class="text-center"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit, neque eget faucibus bibendum, ligula diam gravida risus, sed faucibus felis velit gravida tellus. Phasellus vitae tempor ante, in eleifend eros. Morbi eu felis placerat, convallis orci vitae, rutrum nulla. Integer sed est euismod, tristique diam tincidunt, faucibus ex. Aliquam dui odio, fringilla sit amet nulla eget, vehicula semper ante. Suspendisse commodo felis orci, non ullamcorper ex faucibus ut. Fusce tempus scelerisque justo, pharetra efficitur risus porttitor quis. Vestibulum et tellus ligula. Sed molestie iaculis massa, nec ornare justo vehicula ac. Aliquam laoreet nisl volutpat sem sodales vehicula. Donec et porta sem. Vivamus aliquam facilisis ipsum sit amet rutrum. Aliquam lobortis interdum auctor. Aliquam ut vulputate dui. Integer eu blandit erat. Etiam quam ligula, porttitor in porta sit amet, sodales quis magna. Mauris non gravida arcu, id imperdiet metus. Mauris eu viverra justo, quis pretium turpis. Mauris laoreet ante et elementum mollis. Nunc tempor nisi id facilisis porttitor. Integer ante metus, ullamcorper at egestas a, vehicula in ligula. Donec sed lacus est. Aenean blandit tincidunt dolor nec lacinia. Praesent finibus turpis ultrices, semper libero at, semper sapien. Morbi molestie ex congue risus porttitor, nec feugiat orci pulvinar. </p> </div> </div>