JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-static" id="navbar-example2">
<div class="container-fluid">
<div class="navbar-header"> <button class="collapsed navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-example-js-navbar-scrollspy"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#" class="navbar-brand">Project Name</a> </div>
<div class="collapse navbar-collapse bs-example-js-navbar-scrollspy">
<ul class="nav navbar-nav">
<li class="active"><a href="#fat">@fat</a></li>
<li class=""><a href="#mdo">@mdo</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" id="navbarDrop1" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="navbarDrop1">
<li class=""><a href="#one">one</a></li>
<li class=""><a href="#two">two</a></li>
<li role="separator" class="divider"></li>
<li class=""><a href="#three">three</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div id="scroll" data-spy="scroll" data-target="#navbar-example2" data-offset="0">
<h4 id="fat">@fat</h4>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights...
CSS
#scroll {
position: relative;
height: 200px;
margin-top: 10px;
overflow: auto;
}
JavaScript
var AppRouter = Backbone.Router.extend({
routes: {
"": "home",
"fat": "fat",
"mdo": "mdo",
"one": "one",
"two": "two",
"three": "three"
}
});
window.app = new AppRouter();
window.app.on('route', function(route) {
console.log('routing handler for ' + route);
});
$('body').on('activate.bs.scrollspy', function () {
var active = $('nav li:not(.dropdown).active a').attr('href').slice(1);
window.app.navigate(active, {trigger: true});
console.log('update url/history to ' + active);
})
Backbone.history.start();