JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<div class="row">
<div class="span12">
<div id="navbar">
<ul class="nav dateNav">
<li><a href="#d_2013-01-09">9th Jan 2013</a>
</li>
<li><a href="#d_2013-01-11">11th Jan 2013</a>
</li>
<li><a href="#d_2013-01-18">18th Jan 2013</a>
</li>
<li><a href="#d_2013-01-23">23rd Jan 2013</a>
</li>
<li><a href="#d_2013-01-25">25th Jan 2013</a>
</li>
<li><a href="#d_2013-01-30">30th Jan 2013</a>
</li>
</ul>
</div>
<div id="spyOnThis">
<div id="d_2013-01-09" class="box">
<h1 class="resultTitle fontSize13">Available on 9th Jan 2013</h1>
<h2>Film Name</h2>
</div>
<div id="d_2013-01-11" class="box">
<h1 class="resultTitle fontSize13">Available on 11th Jan 2013</h1>
<h2>Film Name</h2>
</div>
<div id="d_2013-01-18" class="box">
<h1 class="resultTitle fontSize13">Available on 18th Jan 2013</h1>
<h2>Film Name</h2>
</div>
<div id="d_2013-01-23" class="box">
<h1 class="resultTitle fontSize13">Available on 23rd Jan 2013</h1>
<h2>Film Name</h2>
</div>
<div id="d_2013-01-25" class="box">
<h1 class="resultTitle fontSize13">Available on 25th Jan 2013</h1>
<h2>Film Name</h2>
</div>
<div id="d_2013-01-30" class="box">
<h1 class="resultTitle fontSize13">Available on 30th Jan 2013</h1>
<h2>Film Name</h2>
...
CSS
@import url(http://twitter.github.com/bootstrap/assets/css/bootstrap.css);
.box {
margin: 20px;
padding: 15px;
background: #eee;
height: auto;
padding-top:50px;
}
#navbar {
position: fixed;
top: 0;
left: 20px;
width: 100%;
background: #fff;
text-align:center;
}
.dateNav > li > a:hover {
color: #f33 !important;
background: none;
}
ul.dateNav > li.active > a {
display:block;
color: red;
text-decoration: underline;
}
#spyOnThis {
height: 500px;
overflow: auto;
}
JavaScript
$('#spyOnThis').scrollspy();