Bootstrap Affix Navbar

Bootstrap Affix Navbar after content scrolled past hero unit.

by Ajey

HTML

<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap.min.css">
<div class="container" id="nav">
    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <div class="span12"> <a class="brand" href="#">Home</a>

                    <ul class="nav" id="my-nav">
                        <li class="active"><a href="#">Home</a>
                        </li>
                        <li><a href="#" data-target="one">1</a>
                        </li>
                        <li><a href="#" data-target="two">2</a>
                        </li>
                        <li><a href="#" data-target="three">3</a>
                        </li>
                        <li><a href="#" data-target="four">4</a>
                        </li>
                        <li><a href="#" data-target="five">5</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div class="span3">
        <p style="height:1000px;padding:10px;" id="one">Long scrolling text here... Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo.</p>
        <p style="height:1000px;padding:10px;" id="two">Long scrolling text here... Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo. Ovi...

CSS

#con .well {
    height:400px;
}
#nav.affix {
    position: fixed;
    top: 0;
    width: 100%
}

JavaScript

$('#nav').affix({});

$('#my-nav > li > a').on('click', function (event) {
    event.preventDefault();
    var target = "#" + $(this).data('target');

    $('html, body').animate({
        scrollTop: $(target).offset().top - 150
    }, 1000);
});