Prev Demo
Bootstrap
>
Scroll Spy Events
Next Demo
Write code here
J
|
B
|
A
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <style> #demo { position: fixed; top: 350px; font-size: 30px; } #myScrollspy { position: relative; top: 50px; height:280px; overflow: auto; font-size: 30px; } #dnf { color: white; background-color: red; } #tec { color: white; background-color: black; } #child { color: white; background-color: blue; } #itf { color: white; background-color: green; } </style> </head> <body> <p id="demo">You are currently viewing page: DotNetFunda</p> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">SN ITFunda</a> </div> <div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li><a href="#dnf">DotNetFunda</a></li> <li><a href="#tec">TechFunda</a></li> <li><a href="#child">KidsFunda</a></li> <li><a href="#itf">ITFunda</a></li> </ul> </div> </div> </div> </nav> <div id="myScrollspy"> <div id="dnf"> <div class="container-fluid"> <h1>DotNetFunda<a href="#" onclick="removeSection(this);">× Close</a></h1> <p>DotNetFunda.Com is a popular online tutorials and guide for latest Microsoft® technologies aimed for beginners and intermediate level professionals. We help beginners to become intermediate level professionals and help intermediate level professionals to become an expert. By following our different sections regularly, we hope you will soon become one of the 'Most Valuable' professional and start shining in your career. </p> </div> </div> <div id="tec"> <div class="container-fluid"> <h1>TechFunda<a href="#" onclick="removeSection(this);">× Close</a></h1> <p>TechFunda is a free How to web technologies tutorials website. Enjoy your learning in How to manner that are based on real time problem solutions. If you have a how to problem to ask, please ask here.</p> </div> </div> <div id="child"> <div class="container-fluid"> <h1>KidsFunda<a href="#" onclick="removeSection(this);">×Close</a></h1> <p>KidsFunda is a online tutorial which makes people entertain by playing games, watching videos, paintings, etc</p> </div> </div> <div id="itf"> <div class="container-fluid"> <h1>ITFunda <a href="#" onclick="removeSection(this);">×Close</a></h1> <p>ITFunda is a online tutorial which provides offline training and online training for the people and also provides sales of ebooks which are helpful to understand the people to learn technologies and besides these it provides job support for the people who are facing problems in their field </p> </div> </div> </div> <script> $(document).ready(function () { removeSection = function (e) { $(e).parents("#myScrollspy > div").remove(); $('#myScrollspy').each(function () { }); }; $("#myScrollspy").scrollspy({ target: ".navbar" }); $(".navbar").on("activate.bs.scrollspy", function () { var x = $(".nav li.active > a").text(); $("#demo").empty().html("You are currently viewing: " + x); }) }); </script> </body> </html>
Note: We DO NOT save your trial code in our database.
Output
