2017-08-06 145 views
0

我正在为我的学校构建一个活动网站。我正在实现一个侧栏,它在视口中改变网站不同部分的颜色。我无法做出滚动式的工作。Bootstrap Scrollspy无法检测到导航

这是我有:https://codepen.io/aahlfeeyann/pen/oeBGdq

<body data-spy="scroll" data-target="#sidebar"> 
    <div class="wrapper"> 
    <nav id="sidebar"> 
     <ul class="sidebar visible"> 
     <li id="step1" class="active"> 
      <a href="#hero"> 
      <span>Home</span> 
      </a> 
     </li> 
     <li id="step2"> 
      <a href="#about"> 
      <span>About this Campaign</span> 
      </a> 
     </li> 
     <li id="step3"> 
      <a href="#mvps"> 
      <span>Our Participants</span> 
      </a> 
     </li> 
     <li id="step4"> 
      <a href="#appreciation"> 
      <span>How to fight Procrastination</span> 
      </a> 
     </li> 
     <li id="step5"> 
      <a href="#details"> 
      <span>Event Details</span> 
      </a> 
     </li> 
     <li id="step6"> 
      <a href="#team"> 
      <span>Our Team!</span> 
      </a> 
     </li> 
     </ul> 
    </nav> 
    <div class="bg-wrapper"> 
     <div class="section" id="hero"> 
     </div> 
     <div class="section" id="about"> 
     <h1>About the Campaign</h1> 
     </div> 
     <div class="section" id="mvps"> 
     <h1>Our Participants</h1> 
     </div> 
     <div class="section" id="appreciation"> 
     <h1>Appreciation...?</h1> 
     </div> 
     <div class="section" id="details"> 
     <h1>Event Information</h1> 
     </div> 
     <div class="section" id="team"> 
     <h1>About the Team</h1> 
     </div> 
    </div> 
    </div> 

</body> 

回答

0

添加navul元素。 作为每引导文档

Scrollspy目前需要用于激活链接的合适 高亮使用自举NAV组分。

HTML

<ul class="sidebar visible nav"> 
..... 
... 
.. 
. 
</ul> 

Scrollspy Docs Reference

希望这有助于..

+0

嗨这个工作!非常不注意我没有注意到我没有导航。谢谢! – aahlfeeyann

+0

@aahlfeeyann,酷...快乐编码...:D –