Bootstrap Scrollspyナビゲーションを検出できません

私の学校のキャンペーンサイトを構築しています。私はサイドバーを実装しています。サイドバーは、ビューポートにあるときにウェブサイトのさまざまなセクションで色を変更します。私はscrollpyを動作させることができません。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>

出典

2017-08-06 aahlfeeyann

はul要素にnavクラスを追加します。ブートストラップドキュメント

Scrollspy 1としては、現在アクティブなリンクの適切なハイライトのためのブートストラップのナビゲーションコンポーネントを使用する必要があります。

HTML

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

Scrollspy Docs Reference

・ホープ、このことができます。..

出典

2017-08-07 04:31:44

こんにちは、これは働いていました！私には気付かないほど私には不注意で、私はナビをしませんでした。ありがとう！ – aahlfeeyann

@aahlfeeyann、Cool ...ハッピーコーディング...：D –

Bootstrap Scrollspyナビゲーションを検出できません

答えて

関連する問題