Bootstrap Affix

 
  • Fixed (sticky) vertical sidenav on scroll.
  • Scroll this page to see how the left navigation menu behaves with data-spy=affix
 
 
 
<!DOCTYPE html> <html> <head> <title>Bootstrap Affix Example</title> <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.2/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <style> .affix { top: 20px; } </style> </head> <body> <div class="container-fluid" style="background-color:black;height:100px;"> <h1>Bootstrap Affix Example</h1> </div> <br> <div class="container"> <div class="row"> <nav class="col-sm-2"> <ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205"> <li class="active"><a href="">Part 1</a></li> <li><a href="">Part 2</a></li> <li><a href="">Part 3</a></li> </ul> </nav> <div class="col-sm-offset-2 col-sm-7"> <h1>Some text</h1> <h1>Some text</h1> <h1>Some text</h1> <h1>Some text</h1> <h1>Some text</h1> <h1>Some text</h1> <h1>Some text</h1> <h1>Some text</h1> <h1>Some text</h1> <h1>Some text</h1> <h1>Some text</h1> <h1>Some text</h1> <h1>Some text</h1> <h1>Some text</h1> </div> </div> </div> </body> </html>
Output