"broken scrollspy example"
Bootstrap 3.3.0 Snippet by haoramirez

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- http://jsfiddle.net/KyleMit/v6zhz/170/?utm_source=website&utm_medium=embed&utm_campaign=v6zhz --> <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>The HTML5 Herald</title> <meta name="description" content="The HTML5 Herald"> <meta name="author" content="SitePoint"> <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css"> <style> .group { background: yellow; width: 200px; height: 500px; } .group .subgroup { background: orange; width: 150px; height: 200px; } #sidebar.affix { top: 20px; } /* sidebar */ .bs-docs-sidebar { padding-left: 20px; margin-top: 20px; margin-bottom: 20px; } /* all links */ .bs-docs-sidebar .nav>li>a { color: #999; border-left: 2px solid transparent; padding: 4px 20px; font-size: 13px; font-weight: 400; } /* nested links */ .bs-docs-sidebar .nav .nav>li>a { padding-top: 1px; padding-bottom: 1px; padding-left: 30px; font-size: 12px; } /* active & hover links */ .bs-docs-sidebar .nav>.active>a, .bs-docs-sidebar .nav>li>a:hover, .bs-docs-sidebar .nav>li>a:focus { color: #563d7c; text-decoration: none; background-color: transparent; border-left-color: #563d7c; } /* all active links */ .bs-docs-sidebar .nav>.active>a, .bs-docs-sidebar .nav>.active:hover>a, .bs-docs-sidebar .nav>.active:focus>a { font-weight: 700; } /* nested active links */ .bs-docs-sidebar .nav .nav>.active>a, .bs-docs-sidebar .nav .nav>.active:hover>a, .bs-docs-sidebar .nav .nav>.active:focus>a { font-weight: 500; } /* hide inactive nested list */ .bs-docs-sidebar .nav ul.nav { display: none; } /* show active nested list */ .bs-docs-sidebar .nav>.active>ul.nav { display: block; } </style> <script> $('body').scrollspy({ target: '.bs-docs-sidebar', offset: 40 }); $("#sidebar").affix({ offset: { top: 60 } }); </script> </head> <body data-spy="scroll" data-target="#sidebar"> <!-- Top Navbar --> <div class="navbar navbar-inverse"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"> Bootstrap 3.0 Skeleton </a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> </div> </div> <div class="row"> <!--Nav Bar --> <nav class="col-xs-3 bs-docs-sidebar"> <ul id="sidebar" class="nav nav-stacked"> <li> <a href="#GroupA">Group A</a> <ul class="nav nav-stacked"> <li><a href="#GroupASub1">Sub-Group 1</a></li> <li><a href="#GroupASub2">Sub-Group 2</a></li> </ul> </li> <li> <a href="#GroupB">Group B</a> <ul class="nav nav-stacked"> <li><a href="#GroupBSub1">Sub-Group 1</a></li> <li><a href="#GroupBSub2">Sub-Group 2</a></li> </ul> </li> <li> <a href="#GroupC">Group C</a> <ul class="nav nav-stacked"> <li><a href="#GroupCSub1">Sub-Group 1</a></li> <li><a href="#GroupCSub2">Sub-Group 2</a></li> </ul> </li> </ul> </nav> <!--Main Content --> <div class="col-xs-9"> <section id="GroupA" class="group"> <h3>Group A</h3> <div id="GroupASub1" class="subgroup"> <h4>Group A Sub 1</h4> </div> <div id="GroupASub2" class="subgroup"> <h4>Group A Sub 2</h4> </div> </section> <section id="GroupB" class="group"> <h3>Group B</h3> <div id="GroupBSub1" class="subgroup"> <h4>Group B Sub 1</h4> </div> <div id="GroupBSub2" class="subgroup"> <h4>Group B Sub 2</h4> </div> </section> <section id="GroupC" class="group"> <h3>Group C</h3> <div id="GroupCSub1" class="subgroup"> <h4>Group C Sub 1</h4> </div> <div id="GroupCSub2" class="subgroup"> <h4>Group C Sub 2</h4> </div> </section> </div> </div></body> </html>

Related: See More

Rubik Presentation Page
Sidebar navigation with Scrollspy

Questions / Comments: