Bootstrap Skeleton
This is a simple Bootstrap skeleton. You can fork it to get a ready to use Bootstrap fiddle.
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div id="left-sidebar" class="span3 sidebar">
<div class="side-nav sidebar-block">
<div id="dateNav">
<h3 class="resultTitle fontSize13">Release Dates</h3>
<ul class="nav date">
<li> <i class="icon-chevron-right"></i><a id="#d_#{date}" href="#d_2013-01-09">9th Jan 2013</a>
</li>
<li><i class="icon-chevron-right"></i>
<a id="#d_#{date}" href="#d_2013-01-11">11th Jan 2013</a>
</li>
<li class="active"><i class="icon-chevron-right"></i>
<a id="#d_#{date}" href="#d_2013-01-30">30th Jan 2013</a>
</li>
</ul>
</div>
</div>
</div>
<div class="span9" id="spyOnThis">
<h3 id="d_2013-01-09" class="resultTitle fontSize13">Available on 9th Jan 2013</h3>
<div class="thumbnail clearfix">
<!--Image Here -->
<div class="caption pull-right">
<!--Paragraphs in here -->
</div>
</div>
<h3 id="d_2013-01-11" class="resultTitle fontSize13">Available on 11th Jan 2013</h3>
<div class="thumbnail clearfix">
<!--Image Here -->
<div class="caption pull-right">
<!-- Paragraphs here -->
</div>
</div>
<div class="thumbnail clearfix">
<!-- Image Here-->
<div class="caption pull-right">
<!-paragraphs here -->
</div>
</div>
<div class="thumbnail clearfix">
<!-- Image Here-->
<div class="caption pull-right">
...
CSS
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
#dateNav {
position: fixed;
}
#spyOnThis {
height:100%;
overflow:auto;
}
.side-nav .active a {
color: #FFBE00;
}
JavaScript
$(window).scrollspy({
wrap: $('#spyOnThis')[0]
});