Prev Demo
Bootstrap
>
Vertical Scrollspy
Next Demo
Write code here
J
|
B
|
A
<!DOCTYPE html> <html lang="en"> <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; } ul.nav-pills { top: 20px; position: fixed; } div.col-sm-9 div { height: 250px; font-size: 28px; } #dnf { color: white; background-color: red; } #tec { color: white; background-color: green; } #off { color: white; background-color: orange; } #on { color: white; background-color: black; } @media screen and (max-width: 800px) { #dnf, #tec, #off, #on { margin-left: 150px; } } </style> </head> <body data-spy="scroll" data-target="#myScroll"> <div class="container"> <div class="row"> <nav class="col-sm-3" id="myScroll"> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#dnf">DotNetFunda</a></li> <li><a href="#tec">TechFunda</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="#off">Offline training</a></li> <li><a href="#on">Online training</a></li> </ul> </li> </ul> </nav> <div class="col-sm-9"> <div id="dnf"> <h1>DotNetFunda</h1> <p>Am DotNetFunda Am DotNetFunda Am DotNetFunda Am DotNetFunda Am DotNetFunda Am DotNetFunda Am DotNetFunda Am DotNetFunda Am DotNetFunda Am DotNetFunda Am DotNetFunda Am DotNetFunda Am DotNetFunda </p> </div> <div id="tec"> <h1>TechFunda</h1> <p>AmTechFunda AmTechFunda AmTechFunda AmTechFunda AmTechFunda AmTechFunda </p> </div> <div id="off"> <h1>ITFunda</h1> <p>Offline training Offline training Offline training Offline training Offline training Offline training Offline training Offline training Offline training Offline training</p> </div> <div id="on"> <h1>ITFunda</h1> <p>Online training Online training Online training Online training Online training Online training Online training Online training Online training Online training Online training </p> </div> </div> </div> </div> </body> </html>
Note: We DO NOT save your trial code in our database.
Output
