2017-08-06 1 views
0

Ich baue eine Kampagnenseite für meine Schule. Ich implementiere eine Seitenleiste, die die Farbe in verschiedenen Bereichen der Website ändert, wenn sie sich im Ansichtsfenster befindet. Ich kann das Scrollspy nicht machen. DieseBootstrap ScrollSpy kann die Navigation nicht erkennen

ist, was ich habe: 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> 

Antwort

0

nav Klasse ul Element hinzufügen. Per Bootstrap Docs

Scrollspy erfordert derzeit die Verwendung einer Komponente Bootstrap nav für korrekte Markierung der aktiven Links.

HTML

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

Scrollspy Docs Reference

this helps ..

+0

Hallo dies funktionierte! Sehr unvorsichtig von mir, um nicht zu bemerken, ich habe kein Nav. Vielen Dank! – aahlfeeyann

+0

@aahlfeeyann, Cool ... Happy Coding ...: D –

Verwandte Themen