The functionality you are asking for is provided by the Scrollspy plug-in. On the other hand, all that affix
does is provide you with a fixed nav
after a certain offset. As affix is often used in combination with Scrollspy, this can be a source of confusion as to the role of each of the plugins.
To use the scrollspy
plugin in your page, add the following attributes to the <body>
element of your page.
Add an identifier to the
<div>
container of yournav
list element:<div class="col-md-3" id="sidenav"> <ul class="nav nav-list pcg-help-affix affix-top" data-toggle="affix" data-spy="affix" data-offset-top="200" id="navbar2">
Apply the Scrollspy plug-in to your
<body>
element:<body style="" data-spy="scroll" data-target="#sidenav">
Now the active
class is toggled when you scroll (see demo).
But no different styling is applied to the links. This is because you need to fix a couple of things with you navbar. nav-list
is no longer used in Bootstrap 3. Use instead the classes nav-pills
and nav-stacked
for a nice effect:
<ul class="nav nav-pills nav-stacked pcg-help-affix affix-top" data-toggle="affix" data-spy="affix" data-offset-top="200" id="navbar2">
Also, the initial page should apply the .active
class to the "Settings" link instead of the "Design" link.
Check this working demo.