Here's a solution using Bootstrap's affix plugin:
HTML:
<header class="container-fluid">
...
</header>
<nav class="navbar navbar-default navbar-static-top" role="navigation">
...
</nav>
Javascript:
$('nav').affix({
offset: {
top: $('header').height()
}
});
Set padding-top to your body equal to that of your nav's height so that the content overlayed by the fixed navbar is visible.
$('nav').on('affix.bs.affix', function (){
$('body').css('margin-top', $('nav').height());
});
$('nav').on('affix-top.bs.affix', function (){
$('body').css('margin-top', 0);
});
To get the nav to stick on top while scrolling add this bit of CSS.
CSS:
.affix
{
top: 0;
}