2017-03-20 3 views
1

Ziemlich Grundproblem. Ich versuche, bootstrap scrollspy auf einer einseitigen Website, an der ich gerade arbeite, zu bearbeiten, und habe mir die Dokumentation eine Weile angesehen, kann aber nicht herausfinden, warum scrollspy die verschiedenen Abschnitte nicht aufgreift. Stattdessen fügt es der Verknüpfung für den letzten Abschnitt die aktive Klasse hinzu, unabhängig davon, welcher Abschnitt angezeigt wird.Bootstrap Scrollspy funktioniert nicht und stecken auf einer Seite

Kann jemand sehen, wo das Problem liegt?

Codepen: https://codepen.io/anon/pen/oZEWMy.

HTML:

<body ng-app="portfolioApp" data-spy="scroll" data-target="#navbar"> 

    <div class="container-fluid"> 

    <nav class="navbar navbar-default navbar-fixed-top"> 

     <div class="navbar-header"> 

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"> 

       <span class="icon-bar"></span> 

       <span class="icon-bar"></span> 

       <span class="icon-bar"></span>       

      </button> 

     </div> 

     <div class="collapse navbar-collapse" id="navbar"> 

      <ul class="pull-right nav navbar-nav"> 

       <li class="navLink"><a href="#home" alt="Home Button">Home</a></li> 

       <li class="navLink"><a href="#about" alt="About Button">About</a></li> 

       <li class="navLink"><a href="#skills" alt="Skills Button">Skills</a></li> 

       <li class="navLink"><a href="#work" alt="Work Button">Work</a></li> 

       <li class="navLink"><a href="#contact" alt="Contact Button">Contact</a></li> 

      </ul> 

      <ul class="pull-right nav navbar-nav"> 

       <li class="socialIcon"><a href="https://github.com/nickwcook/" target="_blank"><span class="fa fa-github fa-lg"></span></a></li> 

       <li class="socialIcon"><a href="https://www.linkedin.com/in/nicholas-cook-796b08125" target="_blank"><span class="fa fa-linkedin fa-lg"></span></a></li> 

       <li class="socialIcon"><a href="Nicholas Cook - CV.pdf" target="_blank"><span class="fa fa-file-pdf-o fa-lg"></span></a></li> 

      </ul> 

     </div> 

    </nav> 

    </div> 

    <main data-simplebar> 

     <section id="home"> 

      <div class="sectionContent"> 

       <h1 id="intro">My name is Nick Cook.</br> I'm a Graduate Web Developer with experience in developing responsive and dynamic websites using a variety of different development skills.</h1> 

      </div> 

     </section> 

     <section id="about"> 

      <div class="sectionContent"> 

       <div class="row"> 

        <div class="col-sm-12 col-md-10"> 

         <h1>About Me</h1> 

         <p>I'm a Computer Science Graduate of the University of Chester with a keen interest in development, which I gained as a result of undertaking various web-based units during my studies. I've enjoyed developing websites for a variety of different scenarios, both in university and for different clients, and I've also independently furthered my skills in my own time using online resources. Having already gained experience in developing responsive and dynamic websites using basic front-end and back-end technologies as a student, I've since continued to learn new skills in a variety of popular development frameworks, content management systems and tools, including Bootstrap CSS framework, AngularJS and the Angular Material UI framework, custom WordPress theming and Git.</p> 

        </div> 

        <div class="col-sm-12 col-md-2"> 



        </div> 

       </div> 

      </div> 

     </section> 

     <section id="skills"> 



     </section> 

     <section id="work"> 

      <div class="sectionContent"> 



      </div> 

     </section> 

     <section id="contact"> 

      <div class="sectionContent"> 



      </div> 

     </section> 

    </main> 

Antwort

Verwandte Themen