In bootstrap 3.0 affix how to set active class

StackOverflow https://stackoverflow.com/questions/18513174

Question

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

Was it helpful?

Solution

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.

  1. Add an identifier to the <div> container of your nav 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">

  2. 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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top