Nav - Responsive - Sticky - Jump to links for content delivery

Resulting Solution from : http://stackoverflow.com/questions/12113926/creating-a-sticky-navbar-using-twitter-bootstrap

by bizamajig

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<h1>What the hell...<br><small>...do I do here?</small></h1>
<br>
<div class="subnav navbar">
    <div class="navbar-inner">
        <div class="container">
            <ul class="nav">
                <li><a href="#one">One</a></li>
                <li><a href="#two">Two</a></li>
                <li><a href="#three">Three</a></li>
                <li><a href="#four">Four</a></li>
                <li><a href="#five">Five</a></li>
            </ul>
        </div>
    </div>
</div>
<section id="one">
    <h4>One</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras erat lectus, commodo vel faucibus rhoncus, mattis eget velit. Fusce in consequat orci. Integer nec tempor orci. Curabitur rutrum convallis semper.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras erat lectus, commodo vel faucibus rhoncus, mattis eget velit. Fusce in consequat orci. Integer nec tempor orci. Curabitur rutrum convallis semper. Fusce in consequat orci. Integer nec tempor orci. Curabitur rutrum convallis semper.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras erat lectus, commodo vel faucibus rhoncus, mattis eget velit. Fusce in consequat orci. Integer nec tempor orci. Fusce in consequat orci. Integer nec tempor orci. Curabitur rutrum convallis semper.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras erat lectus, commodo vel faucibus rhoncus, mattis eget velit. Fusce in consequat orci. Integer nec tempor orci.
    </p>
</section>
<section id="two">
    <h4>Two</h4>
    <p>Fusce in consequat orci. Integer nec tempor orci. Curabitur rutrum convallis semper.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras erat lectus, commodo vel faucibus rhoncus, mattis eget velit. Fusce in consequat orci. Integer nec tempor orci. Fusce in consequat orci. Integer nec tempor orci. Curabitur rutrum convallis semper.Lorem ipsum dolor sit amet, consectetur...

CSS

body {
    padding: 30px;
}
section {
    padding-top: 50px;
    margin-top: -20px;
}
footer {
    margin-top: 40px;
    height: 120px;   
}
.subnav {
    background:#FFF;
}

.navbar-fixed-top {
    position:fixed;
}

JavaScript

$(document).scroll(function(){
    var elem = $('.subnav');
    if (!elem.attr('data-top')) {
        if (elem.hasClass('navbar-fixed-top'))
            return;
         var offset = elem.offset()
        elem.attr('data-top', offset.top);
    }
    if (elem.attr('data-top') - elem.outerHeight() <= $(this).scrollTop() - $(elem).outerHeight())
        elem.addClass('navbar-fixed-top');
    else
        elem.removeClass('navbar-fixed-top');
});