Prev Demo
Scrollspy With Affix
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; } .affix { top: 0; width: 100%; z-index: 9999 !important; } .navbar { margin-bottom: 0px; } .affix ~ .container-fluid { position: relative; top: 50px; } #dnf { padding-top: 50px; height: 200px; color: black; background-color: bisque; } #tec { padding-top: 50px; height: 200px; color: black; background-color: orange; } #child { padding-top: 50px; height: 200px; color: white; background-color: green; } #on { padding-top: 50px; height: 200px; color: black; background-color: pink; } #off { padding-top: 50px; height: 200px; color: white; background-color: maroon; } </style> </head> <body data-spy="scroll" data-offset="50" data-target=".navbar"> <div class="container-fluid" style="background-color:cadetblue;color:white; height:200px"> <h1>SN ITFunda </h1> <h3>is a software company which holds a websites of DotnetFunda, TechFunda, ITFunda, KidsFunda, FarmingFunda, Fundoovideo etc </h3> </div> <nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="200"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mynavbar"> <span class="sr-only"></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 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 class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">ITFunda<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#on">Online training</a></li> <li><a href="#off">Offline training</a></li> </ul> </li> </ul> </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.</p> </div> <div id="child" class="container-fluid"> <h1>KidsFunda</h1> <p>KidsFunda is a online tutorials for entertainment, playing games, paintings, etc KidsFunda is a online tutorials for entertainment, playing games, paintings, etc KidsFunda is a online tutorials for entertainment, playing games, paintings, etc </p> </div> <div id="on" class="container-fluid"> <h1>ITFunda</h1> <p>ITFunda is a online tutorial which provides online training ITFunda is a online tutorial which provides online training ITFunda is a online tutorial which provides online training ITFunda is a online tutorial which provides online training ITFunda is a online tutorial which provides online training ITFunda is a online tutorial which provides online training </p> </div> <div id="off" class="container-fluid"> <h1>ITFunda</h1> <p>ITFunda Provides offline training ITFunda Provides offline training ITFunda Provides offline training ITFunda Provides offline training ITFunda Provides offline training </p> </div> </body> </html>
Note: We DO NOT save your trial code in our database.
Output
