title: Navbar fixed when scroll. With javascript
body: <p>I don't code javascript so it is a problem for me to understand how to develop my navbar to look like this: <a href="http://www.bootply.com/kD5wiG5udv" rel="nofollow noreferrer">http://www.bootply.com/kD5wiG5udv</a></p>
  
  <p>I have obviously used common sense and swapped my selectors but it still isn't working. Could someone please advise me on what steps to take next?</p>
  
  <p>Please use the above website to navigate through my code as I am not going to add the bootstrap files to this post. They are too large.</p>
  
  <p>Benjamin</p>
  
  <pre><code>&lt;nav class="navbar navbar-default" role="navigation" id="nav"&gt;
    &lt;div class="container-fluid"&gt;
      &lt;div class="navbar-header"&gt;
          &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
              &lt;span class="sr-only"&gt;Toggle Navigation&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;/button&gt;
        &lt;a class="navbar-brand" href="#"&gt;
          &lt;img alt="" src=""&gt;
        &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="navbar-collapse collapse"&gt;
          &lt;ul class="nav navbar-nav"&gt;
              &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Projects&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Services&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;About&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.navbar-default
  
  {
  
    background-color: #fbfbfb;
  }
  
  .navbar-nav {
      float:none;
      margin:0 auto;
      display: block;
      text-align: center;
  }
  
  .navbar-nav &gt; li {
      display: inline-block;
      float:none;
  }
  
  .scroll-top {
     position:fixed;
     bottom:0;
     right:6%;
     z-index:100;
     background: #f2f3f2;
     font-size:24px;
     border-top-left-radius:3px;
     border-top-right-radius:3px;
  }
  .scroll-top a:link,.scroll-top a:visited {
    color:#222;
  } 
  
  .navbar-nav {
  
    margin-left: 50px;
    margin-top: -5px;
  }
  </code></pre>
  
  <p>Javascript: </p>
  
  <pre><code>/* affix the navbar after scroll below header */
  $('#nav').affix({
        offset: {
          top: $('header').height()-$('#nav').height()
        }
  }); 
  
  /* highlight the top nav as scrolling occurs */
  $('body').scrollspy({ target: '#nav' })
  
  /* smooth scrolling for scroll to top */
  $('.scroll-top').click(function(){
    $('body,html').animate({scrollTop:0},1000);
  })
  
  /* smooth scrolling for nav sections */
  $('#nav .navbar-nav li&gt;a').click(function(){
    var link = $(this).attr('href');
    var posi = $(link).offset().top;
    $('body,html').animate({scrollTop:posi},700);
  });
  </code></pre>