Navbar fixed when scroll. With javascript

Question

I don't code javascript so it is a problem for me to understand how to develop my navbar to look like this: http://www.bootply.com/kD5wiG5udv

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?

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.

Benjamin

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

CSS:

.navbar-default

{

  background-color: #fbfbfb;
}

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

.navbar-nav > 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;
}

Javascript:

/* 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>a').click(function(){
  var link = $(this).attr('href');
  var posi = $(link).offset().top;
  $('body,html').animate({scrollTop:posi},700);
});

Answer 1

In my opinion it would be great to do as much as possible in CSS if your website does not to be compatible with old versions of the browsers. I'm not sure if the Bootstrap has it's own way to implement something similar, but here you can get the idea on how you'd do this yourself. The main role of jQuery here would be just to add a class on scroll event, which would trigger an animation of opacity. This should be much cleaner solution for the problem as it would be smooth and fast. Here is the working fiddle: https://jsfiddle.net/q5jo781c/1/

This part toggles class on scroll:

$(document).ready(function(){
    $(document).scroll(function(){
        var st = $(this).scrollTop();
        if(st > 200) {
            $("navbar").addClass('fixed');
        } else {
            $("navbar").removeClass('fixed');
        }
    });
});

And the CSS:

navbar {
  width: 100%;
  display: block;
  height: 50px;
  background-color: black;
}

navbar.fixed {
  position: fixed;
  top: 0;
  left: 0;
  background-color: white;
  animation-name: example;
  animation-duration: 1s;
}

@keyframes example {
  from {opacity: 0;}
  to {opacity: 1;}
}

You can find more of the CSS in the fiddle. Hope it helps.