In bootstrap 3.0 affix how to set active class
I have navigation with bootstrap affix and want to change the active li when scrolling. I have tried what ever given in the documentation but couldn't fix it. Could some one help me for fixing it? You can see my page in the url http://www.thephpcode.com/help/website-generation-using-pcg.html
Answer
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 yournavlist 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.