JSFiddle - React, Tailwind, and code Playground

by Amir Sharifian

HTML

<script src="https://secure.fbapps.co.uk/dev/js/vendor/bootstrap.js"></script>
<link rel="stylesheet" href="https://secure.fbapps.co.uk/dev/css/bootstrap.css">
<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
            <a class="brand" href="#">Scollspy Fixed Nav Offset</a>

            <div class="nav-collapse collapse">
                <ul class="nav">
                    <li><a href="#welcome" data-scroll="#welcome">Welcome</a></li>
                    <li><a href="#about" data-scroll="#about">About</a></li>
                    <li><a href="#route" data-scroll="#route">The Route</a></li>
                    <li><a href="#bike" data-scroll="#bike">The Bike</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <!-- Example row of columns -->
    <div id="welcome" class="row-fluid">
        <div class="span12">
             <h3>Welcome</h3>

            <p class="lead">Nulla bibendum ligula ut nisi dictum, et interdum ipsum scelerisque. Nullam a volutpat tellus. Maecenas nisi est, ultricies in neque in, aliquet dictum odio.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas consectetur ante a rhoncus. Praesent a sapien vulputate, vehicula risus et, congue mi. Praesent quis auctor enim. Aenean gravida, libero ut dignissim porta, elit nisi faucibus nisi, vitae faucibus lorem eros in augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ac varius diam. Mauris consectetur sed erat at dapibus. Fusce pulvinar est eu orci lacinia egestas.</p>
            <p>Phasellus facilisis nulla quis tortor adipiscing, eu blandit...

CSS

body {
    padding: 51px 0 0;
}
/* Override Bootstrap Responsive CSS fixed navbar */
 @media (max-width: 979px) {
    .navbar-fixed-top, .navbar-fixed-bottom {
        position: fixed;
        margin-left: 0px;
        margin-right: 0px;
    }
}
body > .container {
    padding: 0 15px;
}

JavaScript

var offsetHeight = 100;

$('.nav-collapse').scrollspy({
    offset: offsetHeight
});

$('.navbar li a').click(function (event) {
    var scrollPos = $('body > .container').find($(this).attr('href')).offset().top - offsetHeight;
    $('body,html').animate({
        scrollTop: scrollPos
    }, 500, function () {
        $(".btn-navbar").click();
    });
    return false;
});