Bootstrap affix navbar scrollspy issue

Question

I have a bootsply setup to demonstrate the issue. The issue is that nav links dont get the active status properly. If you scroll down the page the "Getting started" li item should become bold but it doesnt. Only the "Font awesome" li item works. Also the last link "Bootstrap" doesnt get bold ones you click on it.

CSS:

header {
  height: 365px;
  background: url("http://i.imgur.com/wU2YhOJ.png");
  background-color: #262626;
  background-size: cover;
  background-position: center;
}

header h1{
  font-family: Montserrat, sans-serif !important;
  font-size: 5.5em;
  color: white;
  word-break: normal;
  padding-top: 115px;

}

body h1 {
  font-family: 'Lato', sans-serif;
  line-height: 72px;
}

body, footer { font-family: 'Open Sans', sans-serif !important; }

body p { line-height: 28px; }

footer { background-color: #262626; }

.affix {
  top: 0px;
}

/* sidebar */
.bs-docs-sidebar {
  padding-left: 20px;
  margin-top: 60px;
  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: #262626;                 
  text-decoration: none;          
  background-color: transparent;  
  border-left-color: #262626; 
}
/* 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: 600;
}
/* 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: 400;
}

/* 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;           
}
/* special back to top styling */
.back-to-top:hover,
.back-to-top:focus{
  border-left-color: transparent !important;
}

@media all and (max-width: 1170px) {
  .bs-docs-sidebar {
      display: none;
    }   
  }

  @media all and (max-width: 970px) {
    #body-middle {
      float: none;
      margin: 0 auto;
    }   
  }

HTML:

<header id="header">
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                 <h1 class="text-center"><span class="">Theme guide</span></h1>

            </div>
        </div>
    </div>
</header>
<div class="container" id="body-content">
    <div class="row">
        <div class="col-md-2" id="body-left"></div>
        <div class="col-xs-11 col-md-8" id="body-middle">
            <br class="">
            <section>
                <div id="getting-started" class="">
                        <h1 class="">Getting started</h1>

                    <p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus,
                        nisi condimentum pretium ultricies, massa sem porttitor ligula, venenatis
                        luctus felis lorem eget sapien. Nulla nec lectus tristique nunc eleifend
                        interdum pellentesque non nunc. Donec justo justo, tempor eget mattis in,
                        fermentum vitae metus. Nulla quis metus sed erat vulputate fermentum. Nunc
                        pharetra leo non mollis iaculis. Etiam egestas urna sed fermentum ornare.
                        Nulla facilisi. Vestibulum sagittis magna ut tempor pulvinar. Etiam accumsan
                        lectus ornare libero iaculis cursus. Ut imperdiet sollicitudin massa in
                        posuere. In vel mi lacus. In hac habitasse platea dictumst. Morbi ultrices
                        turpis non molestie ornare.</p>
                </div>
            </section>
            <section>
                <div id="font-awesome" class="">
                        <h1 class="">Font awesome</h1>

                    <p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus,
                        nisi condimentum pretium ultricies, massa sem porttitor ligula, venenatis
                        luctus felis lorem eget sapien. Nulla nec lectus tristique nunc eleifend
                        interdum pellentesque non nunc. Donec justo justo, tempor eget mattis in,
                        fermentum vitae metus. Nulla quis metus sed erat vulputate fermentum. Nunc
                        pharetra leo non mollis iaculis. Etiam egestas urna sed fermentum ornare.
                        Nulla facilisi. Vestibulum sagittis magna ut tempor pulvinar.</p>
                </div>
                <div id="font-awesome-sub1" class="">
                        <h3 class="">Sub section</h3>

                    <p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus,
                        nisi condimentum pretium ultricies, massa sem porttitor ligula, venenatis
                        luctus felis lorem eget sapien. Nulla nec lectus tristique nunc eleifend
                        interdum pellentesque non nunc. Donec justo justo, tempor eget mattis in,
                        fermentum vitae metus. Nulla quis metus sed erat vulputate fermentum. Nunc
                        pharetra leo non mollis iaculis. Etiam egestas urna sed fermentum ornare.
                        Nulla facilisi. Vestibulum sagittis magna ut tempor pulvinar. Donec justo
                        justo, tempor eget mattis in, fermentum vitae metus. Nulla quis metus sed
                        erat vulputate fermentum. Nunc pharetra leo non mollis iaculis. Etiam egestas
                        urna sed fermentum ornare. Nulla facilisi. Vestibulum sagittis magna ut
                        tempor pulvinar.</p>
                </div>
                <div id="font-awesome-sub2" class="">
                        <h3 class="">Sub section</h3>

                    <p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus,
                        nisi condimentum pretium ultricies, massa sem porttitor ligula, venenatis
                        luctus felis lorem eget sapien. Nulla nec lectus tristique nunc eleifend
                        interdum pellentesque non nunc. Donec justo justo, tempor eget mattis in,
                        fermentum vitae metus. Nulla quis metus sed erat vulputate fermentum. Nunc
                        pharetra leo non mollis iaculis. Etiam egestas urna sed fermentum ornare.
                        Nulla facilisi. Vestibulum sagittis magna ut tempor pulvinar. Donec justo
                        justo, tempor eget mattis in, fermentum vitae metus. Nulla quis metus sed
                        erat vulputate fermentum. Nunc pharetra leo non mollis iaculis. Etiam egestas
                        urna sed fermentum ornare. Nulla facilisi. Vestibulum sagittis magna ut
                        tempor pulvinar.</p>
                </div>
            </section>
            <section>
                <div id="bootstrap" class="">
                        <h1 class="">Bootstrap</h1>

                    <p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus,
                        nisi condimentum pretium ultricies, massa sem porttitor ligula, venenatis
                        luctus felis lorem eget sapien. Nulla nec lectus tristique nunc eleifend
                        interdum pellentesque non nunc. Donec justo justo, tempor eget mattis in,
                        fermentum vitae metus. Nulla quis metus sed erat vulputate fermentum. Nunc
                        pharetra leo non mollis iaculis. Etiam egestas urna sed fermentum ornare.
                        Nulla facilisi. Vestibulum sagittis magna ut tempor pulvinar. Donec justo
                        justo, tempor eget mattis in, fermentum vitae metus. Nulla quis metus sed
                        erat vulputate fermentum. Nunc pharetra leo non mollis iaculis. Etiam egestas
                        urna sed fermentum ornare. Nulla facilisi. Vestibulum sagittis magna ut
                        tempor pulvinar.</p>
                </div>
                <div id="bootstrap-sub1" class="">
                        <h3 class="">Sub section</h3>

                    <p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus,
                        nisi condimentum pretium ultricies, massa sem porttitor ligula, venenatis
                        luctus felis lorem eget sapien. Nulla nec lectus tristique nunc eleifend
                        interdum pellentesque non nunc. Donec justo justo, tempor eget mattis in,
                        fermentum vitae metus. Nulla quis metus sed erat vulputate fermentum. Nunc
                        pharetra leo non mollis iaculis. Etiam egestas urna sed fermentum ornare.
                        Nulla facilisi. Vestibulum sagittis magna ut tempor pulvinar. Donec justo
                        justo, tempor eget mattis in, fermentum vitae metus. Nulla quis metus sed
                        erat vulputate fermentum. Nunc pharetra leo non mollis iaculis. Etiam egestas
                        urna sed fermentum ornare. Nulla facilisi. Vestibulum sagittis magna ut
                        tempor pulvinar.</p>
                </div>
                <div id="bootstrap-sub2" class="">
                        <h3 class="">Sub section</h3>

                    <p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus,
                        nisi condimentum pretium ultricies, massa sem porttitor ligula, venenatis
                        luctus felis lorem eget sapien. Nulla nec lectus tristique nunc eleifend
                        interdum pellentesque non nunc. Donec justo justo, tempor eget mattis in,
                        fermentum vitae metus. Nulla quis metus sed erat vulputate fermentum. Nunc
                        pharetra leo non mollis iaculis. Etiam egestas urna sed fermentum ornare.
                        Nulla facilisi. Vestibulum sagittis magna ut tempor pulvinar. Donec justo
                        justo, tempor eget mattis in, fermentum vitae metus. Nulla quis metus sed
                        erat vulputate fermentum. Nunc pharetra leo non mollis iaculis. Etiam egestas
                        urna sed fermentum ornare. Nulla facilisi. Vestibulum sagittis magna ut
                        tempor pulvinar.</p>
                </div>
                <div id="bootstrap-sub3" class="">
                        <h3 class="">Sub section</h3>

                    <p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus,
                        nisi condimentum pretium ultricies, massa sem porttitor ligula, venenatis
                        luctus felis lorem eget sapien. Nulla nec lectus tristique nunc eleifend
                        interdum pellentesque non nunc. Donec justo justo, tempor eget mattis in,
                        fermentum vitae metus. Nulla quis metus sed erat vulputate fermentum. Nunc
                        pharetra leo non mollis iaculis. Etiam egestas urna sed fermentum ornare.
                        Nulla facilisi. Vestibulum sagittis magna ut tempor pulvinar. Donec justo
                        justo, tempor eget mattis in, fermentum vitae metus. Nulla quis metus sed
                        erat vulputate fermentum. Nunc pharetra leo non mollis iaculis. Etiam egestas
                        urna sed fermentum ornare. Nulla facilisi. Vestibulum sagittis magna ut
                        tempor pulvinar.</p>
                </div>
            </section>
        </div>
        <div class="col-md-2 hidden-md" id="body-right">
            <div data-spy="affix" data-offset-top="365" data-offset-bottom="200" class="">
                <nav class="bs-docs-sidebar">
                    <ul id="sidebar" class="nav nav-stacked fixed">
                        <li>    <a href="#getting-started" class="">Getting Started</a>

                            <ul class="nav nav-stacked">
                                <li><a href="#GroupASub1" class="">Sub-Group 1</a>
                                </li>
                                <li><a href="#GroupASub2" class="">Sub-Group 2</a>
                                </li>
                            </ul>
                        </li>
                        <li>    <a href="#font-awesome" class="" contenteditable="false">Font Awesome</a>

                            <ul class="nav nav-stacked">
                                <li><a href="#font-awesome-sub1" class="">Sub-Group 1</a>
                                </li>
                                <li><a href="#font-awesome-sub2" class="">Sub-Group 2</a>
                                </li>
                    </ul>
                    </li>
                    <li>    <a href="#bootstrap" class="" contenteditable="false">Bootstrap</a>

                        <ul class="nav nav-stacked">
                            <li><a href="#bootstrap-sub1" class="">Sub-Group 1</a>
                            </li>
                            <li><a href="#bootstrap-sub2" class="">Sub-Group 2</a>
                            </li>
                            <li><a href="#bootstrap-sub3" class="">Sub-Group 3</a>
                            </li>
                            </ul>
                    </li>
                    <li><span class="">&nbsp;</span>
                    </li>
                    <li>    <a class="back-to-top" href="#header">Back to top</a>

                    </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</div>
<footer>
    <p class="text-center">Prepared by xxx. 2014</p>
</footer>

JS:

$('body').scrollspy({
  target: '#sidebar',
  offset: 40
});

Answer 1

You can place the sidebar id on the nav tag. Bootstrap scroll spy will make it the target so that you can achieve what you are trying to do.

<nav id="sidebar" class="bs-docs-sidebar">

Answer 2

 <ul id="sidebar" class="nav nav-stacked fixed">
              <li>  <a href="#getting-started" class="">Getting Started</a>

                        <ul class="nav nav-stacked">
                            <li><a href="#GroupASub1" class="">Sub-Group 1</a>
                            </li>
                            <li><a href="#GroupASub2" class="">Sub-Group 2</a>
                            </li>
                        </ul>

the active selector in the getting started is not being added because there is no subgroup section in the main html. if you add it it works. see here only when you scroll to the sub does the active appear on the main li of the sidebar.http://www.bootply.com/Hrs2sw3uGj# this applies to the boostrap link as well. you have to scroll more to get it to activate!