New Post has been published on Html Use
New Post has been published on http://www.htmluse.com/twitter-bootstrap-scrollspy/
Twitter Bootstrap ScrollSpy
Creating ScrollSpy with Twitter Bootstrap
The scrollspy is a navigation mechanism that directing visitors to the different sections of a page that has huge amount of content. Also the menu targets based on the scrolling position will be automatically highlighted to indicate the visitors where they are currently on the page. It saves the time and makes the content of your pages more accessible to the visitor.
Example
Try this code »
<body data-spy="scroll" data-offset="0" data-target="#myScrollspy">
<div class="container">
<div class="row">
<div class="span3" id="myScrollspy">
<ul class="nav nav-tabs nav-stacked affix">
<li class="active"><a href="#section1">Section One</a></li>
<li><a href="#section2">Section Two</a></li>
<li><a href="#section3">Section Three</a></li>
</ul>
</div>
<div class="span9">
<div class="section1">
<h2>Section One</h2>
<p>This is section one…</p>
</div>
<div class="section2">
<h2>Section Two</h2>
<p>This is section two…</p>
</div>
<div class="section3">
<h2>Section Three</h2>
<p>This is section three…</p>
</div>
</div>
</div>
</div>
Creating ScrollSpy via Data Attributes
You can easily add scrollspy behavior to your topbar navigation by adding data-spy="scroll" to the element you want to spy on (typically this would be the body) and the data-target=".navbar" (to select the navbar).
Example
Try this code »
<!--Navbar HTML-->
<div id="myNavbar" class="navbar navbar-inverse navbar-static">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">Scrollspy</a>
<ul class="nav nav-tab">
<li class="active"><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Section 4<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#section4dot1">Section 4.1</a></li>
<li><a href="#section4dot2">Section 4.2</a></li>
<li><a href="#section4dot3">Section 4.3</a></li>
</ul>
</li>
<li><a href="#section5">Section 5</a></li>
</ul>
</div>
</div>
</div>
<!--Content section-->
<div data-spy="scroll" data-target="#myNavbar" data-offset="0">
<div id="section1">
<h2>Section 1</h2>
<p>This is section one…</p>
</div>
<div id="section2">
<h2>Section 2</h2>
<p>This is section two…</p>
</div>
<div id="section3">
<h2>Section 3</h2>
<p>This is section three…</p>
</div>
<div id="section4">
<h2>Section 4</h2>
<p>This is section four…</p>
<div id="section4dot1">
<p>This is section four point one…</p>
</div>
<div id="section4dot2">
<p>This is section four point two…</p>
</div>
<div id="section4dot3">
<p>This is section four point three…</p>
</div>
</div>
</div>
Creating ScrollSpy via JavaScript
You may also add scrollspy manually using the JavaScript — just call the scrollspy() Bootstrap method with the "id" or "class" selector of the navbar in your JavaScript code.
Example
Try this code »
<script type="text/javascript">
$(document).ready(function()
$(".scroll-area").scrollspy(target: "#myNavbar")
);
</script>
Methods
These are the standard bootstrap’s scrollspy methods:
.scrollspy(‘refresh’)
When using scrollspy in conjunction with adding or removing of elements from the DOM, you’ll need to call the refresh method like this:
Example
Try this code »
<script type="text/javascript">
$(document).ready(function()
$('[data-spy="scroll"]').each(function ()
var $spy = $(this).scrollspy('refresh')
);
);
</script>
Options
There are certain options which may be passed to scrollspy() Bootstrap method to customize the functionality of a scrollspy.
Name Type Default Value Description offset number 10 Number of pixels to offset from top when calculating position of scroll.
Events
Bootstrap’s scrollspy class includes few events for hooking into scrollspy functionality.
Event Description activate.bs.scrollspy This event fires whenever a new item becomes activated by the scrollspy.
The following example displays an alert message to the user when a new item becomes highlighted by the scrollspy.
Example
Try this code »
<script type="text/javascript">
$(document).ready(function()
$("#myNavbar").on("activate.bs.scrollspy", function ()
var currentItem = $(".nav li.active > a").text();
$("#info").empty().html("Currently you are viewing - " + currentItem);
)
);
</script>
