引導詞綴導航欄scrollspy問題

Question

我有一個引導程序來演示此問題。 問題是導航鏈接無法正確獲得活動狀態。 如果向下滾動頁面，則“入門”項目應變為粗體，但不會。 僅“ Font awesome” li項目有效。 同樣，最后一個鏈接“ Bootstrap”也不會在您單擊時顯示為粗體。

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

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

由於主html中沒有子組部分，因此未添加入門中的活動選擇器。 如果添加它，它將起作用。 僅在滾動到子菜單時才能看到此處，活動菜單不會出現在側欄的主菜單欄上。 http://www.bootply.com/Hrs2sw3uGj#這也適用於boostrap鏈接。 您必須滾動更多才能激活它！

Answer 2

您可以將側邊欄ID放置在nav標簽上。 Bootstrap滾動間諜將使其成為目標，因此您可以實現自己想要的目標。

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