.group { background: yellow; width: 200px; } .group .subgroup { background: orange; width: 150px; height: 200px; } .fixed { position: fixed; } /* sidebar */ .bs-docs-sidebar { padding-left: 20px; padding-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; } /* make sidebar srollable */ .bs-docs-sidebar > ul { overflow-y: auto; height: 100%; padding-top: 20px; }
$('body').scrollspy({ target: '.bs-docs-sidebar', offset: 40 });
<div class="container"> <div class="row"> <!--Nav Bar --> <nav class="col-xs-4 bs-docs-sidebar"> <ul id="sidebar" class="nav nav-stacked fixed col-xs-4"> <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> <li><a href="#GroupASub3">Sub-Group 3</a></li> <li><a href="#GroupASub4">Sub-Group 4</a></li> <li><a href="#GroupASub5">Sub-Group 5</a></li> <li><a href="#GroupASub6">Sub-Group 6</a></li> <li><a href="#GroupASub7">Sub-Group 7</a></li> <li><a href="#GroupASub8">Sub-Group 8</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> <li><a href="#GroupBSub3">Sub-Group 3</a></li> <li><a href="#GroupBSub4">Sub-Group 4</a></li> <li><a href="#GroupBSub5">Sub-Group 5</a></li> <li><a href="#GroupBSub6">Sub-Group 6</a></li> <li><a href="#GroupBSub7">Sub-Group 7</a></li> <li><a href="#GroupBSub8">Sub-Group 8</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-7 col-xs-offset-1"> <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> <div id="GroupASub3" class="subgroup"> <h4>Group A Sub 3</h4> </div> <div id="GroupASub4" class="subgroup"> <h4>Group A Sub 4</h4> </div> <div id="GroupASub5" class="subgroup"> <h4>Group A Sub 5</h4> </div> <div id="GroupASub6" class="subgroup"> <h4>Group A Sub 6</h4> </div> <div id="GroupASub7" class="subgroup"> <h4>Group A Sub 7</h4> </div> <div id="GroupASub8" class="subgroup"> <h4>Group A Sub 8</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> <div id="GroupBSub3" class="subgroup"> <h4>Group B Sub 3</h4> </div> <div id="GroupBSub4" class="subgroup"> <h4>Group B Sub 4</h4> </div> <div id="GroupBSub5" class="subgroup"> <h4>Group B Sub 5</h4> </div> <div id="GroupBSub6" class="subgroup"> <h4>Group B Sub 6</h4> </div> <div id="GroupBSub7" class="subgroup"> <h4>Group B Sub 7</h4> </div> <div id="GroupBSub8" class="subgroup"> <h4>Group B Sub 8</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> </div>