JSFiddle - React, Tailwind, and code Playground

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" style="position:fixed;">
    <div class="navbar-inner">

            
            <div class="nav-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 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 tortor pulvinar. In lacus purus, aliquet eu ante ut, tempor ultricies diam. Donec cursus neque neque, eget vehicula nisl commodo at. Fusce eu urna tempus, egestas ante id, facilisis dolor. Pellentesque venenatis ante convallis, ullamcorper erat at, malesuada elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam commodo lectus ut luctus...

CSS

body {
    padding: 10px 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;
}

.nav > li {
  border-bottom: 3px solid #ccc;
  border-bottom-color: #07A8CE;
}

.nav {
  background-color: #07A8CE;
  color: #ffffff;
  border-radius: 0;
  min-height: 20px;
  max-height: 20px;
}

JavaScript

var offsetHeight = 51;

$('.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;
});