JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<body class="container" data-spy="scroll" data-target=".navbar" data-offset="70">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#section-foo">Foo</a></li>
<li><a href="#section-bar">Bar</a></li>
<li><a href="#section-baz">Baz</a></li>
</ul>
</div>
</div>
</nav>
<p>
This is a demo of fixing offsets with Bootstraps's scrollspy. Note that clicking the links in the nav scrolls to the wrong position, due to the fixed navbar.
</p>
<p>
See <a href="http://stackoverflow.com/a/37855117/509706">this SO question</a> and
<a href="https://github.com/twbs/bootstrap/issues/3316">this bootstrap issue</a>.
</p>
<div class="panel panel-default" id="section-foo">
<div class="panel-heading">Foo</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, qui ne vitae fastidii detraxit. Ad dicunt impedit vituperatoribus vis. Probatus inimicus gubergren usu ne, tacimates complectitur vis id. Iusto prompta efficiendi eos an. Id nibh deseruisse moderatius nam. No vel
meliore singulis, ei nusquam corrumpit sea.
</p>
<p>Modus evertitur eos id. Tota falli possim cu pri, id sed quem omittam honestatis. Ei perpetua disputando voluptatibus per, vel hinc scribentur ea. Mei cu periculis democritum disputando, eos quidam legimus...
CSS
body {
padding-top: 70px;
}
JavaScript
var navOffset = $('.navbar').height();
$('.navbar li a').click(function(event) {
var href = $(this).attr('href');
event.preventDefault();
window.location.hash = href;
$(href)[0].scrollIntoView();
window.scrollBy(0, -navOffset);
});