Prev Demo
Bootstrap
>
Scroll Spy With Javascript
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> body { position: relative; } #dnf { padding-top: 40px; height: 300px; color: #fff; background-color: red; } #tec { padding-top: 40px; height: 300px; color: #fff; background-color: black; } #itf { padding-top: 40px; height: 300px; color: #fff; background-color: green; } #fun { padding-top: 40px; height: 300px; color: #fff; background-color:#34044d; } #enter { padding-top: 30px; height: 300px; color: #fff; background-color: orange; } </style> </head> <body> <script> $(document).ready(function () { $('body').scrollspy({ target: ".navbar"}); }); </script> <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="sr-only">Toggle navigation</span> <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="#itf">ITFunda</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">KidsFunda<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#fun">Fun</a></li> <li><a href="#enter">Entertainment</a></li> </ul> </li> </ul> </div> </div> </div> </nav> <div id="dnf" class="container-fluid"> <h1>DotNetFunda</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 id="tec" class="container-fluid"> <h1>TechFunda</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.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.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.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 id="itf" class="container-fluid"> <h1>ITFunda</h1> <p>ITFunda is online tutorial which provides offline training and online training for the people who needs training besides this it also provides sales of the ebboks and materials for the people which are easily understandable with video explanation and provides job support for the people with well experienced person of 20 years in DotNet</p> </div> <div id="fun" class="container-fluid"> <h1>KidsFunda</h1> <p>Kids Funda provides kids to enjoy , draw painting, learning , watching funny videos, and games, quizzes, stories etc </p> </div> <div id="enter" class="container-fluid"> <h1>Entertainment</h1> <p>KidsFunda provides lots of entertainment for the kids to enjoy in learning , watchinng funny videos , games etc</p> </div> </body> </html>
Note: We DO NOT save your trial code in our database.
Output
