Introduction
In this article I will explain Twitter Bootstrap ScrollSpy in PHP. You will see how to use the Twitter Bootstrap ScrollSpy Plugin to based on scroll position. You require the Twitter bootstrapping file before using this article. For the Twitter bootstrapping file you can download using the http://twitter.github.com/ link. After downloaded the file, put it in your www directory and set your path of the required file.
Example
<html>
<head>
<title>Twitter Bootstrap ScrollSpy</title>
<meta name="description" content="Twitter Bootstrap ScrollSpy">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
.scrollspy{
height: 200px;
overflow: auto;
position: relative;
}
</style>
</head>
<body>
<div class="span9 columns">
<h2>Following links of the navbar is going to be highlighted</h2>
<div id="navbarExample" class="navbar navbar-static">
<div class="navbar-inner">
<div class="container" style="width: auto;">
<a class="brand" href="#">csharpcorner</a>
<ul class="nav">
<li class="active"><a href="#php">PHP</a></li>
<li class=""><a href="#js">JS</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Web Designing<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class=""><a href="#HTML">HTML</a></li>
<li class=""><a href="#CSS">CSS</a></li>
<li class=""><a href="#JQUERY">JQuery</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div data-spy="scroll" data-target="#navbarExample" data-offset="50" class="scrollspy">
<h4 id="php">PHP</h4>
<p>PHP is an acronym for Hypertext Preprocessor, and php is widely-used for open source general-purpose scripting language.
Itis especially used for web development. PHP is used for creating interactive and dynamic web pages quickly, but you can do much more with PHP.
</p>
<h4 id="js">JS</h4>
<p>
JavaScript is a cross-platform, object-oriented scripting language developed by Netscape. JavaScript was created
by Netscape programmer Brendan Eich. It was first released under the name of LiveScript as part of Netscape Navigator 2.0 in
September 1995. It was renamed JavaScript on December 4, 1995. Since JavaScript works on the client side, It is mostly used for
client-side web development.
</p>
<h4 id="HTML">HTML</h4>
<p>
HTML is a Markup langauge and HTML stands for hypertext markup language. The markup language ia set of markup tages. The tages describes documents content. HTML documents contain HTML tags and plain text. HTML documents are also called web pages.
<h4 id="CSS">CCS</h4>
<p>
CSS stands for Cascading Style Sheets and Styles define how to display HTML elements. Styles were added to HTML 4.0 to solve a problem
External Style Sheets can save a lot of work. External Style Sheets are stored in CSS files.
<h2>Types of CSS</h2>
CSS is a Three types<br><center>
EXTERNAL CSS<br>
INTERNAL CSS<br>
INLINE CSS</center>
</p>
<h4 id="JQUERY">JQUERY</h4>
<p>jQuery is a lightweight, write less, do more, JavaScript library. The jQuery is a JavaScript Library and jQuery greatly simplifies JavaScript programming. jQuery You can learn easiely. The jQuery purpouse is to make it much easier to use JavaScript on your site.
</p>
<p>Before you start studying jQuery, you should have a basic knowledge of:
HTML
CSS
JavaScript
</p>
</div>
<hr>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-dropdown.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-scrollspy.js"></script>
</body>
</html>
Output
![scrollspy.jpg]()