Scrollspy bootstrap not working properly. How to fix?

Question

css

I have a menu made with bootstrap:

<nav class="navbar navbar-default" id="navigation">
        <div class="navbar-header">
          <!-- Mobile Toggle Menu Button -->
          <a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"><i></i></a>
          <a class="navbar-brand" href="index.html">Twist</a> 
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#" data-nav-section="home"><span>Home</span></a></li>
            <li><a href="#" data-nav-section="services"><span>About Class</span></a></li>
            <li><a href="#" data-nav-section="explore"><span>Register For Class</span></a></li>
            <li><a href="#" data-nav-section="project"><span>Class Schedule</span></a></li>
            <li><a href="#" data-nav-section="testimony"><span>Testimony</span></a></li>
            <li><a href="#" data-nav-section="team"><span>Team</span></a></li>
            <li><a href="#" data-nav-section="faq"><span>FAQ</span></a></li>
            <li><a href="#" data-nav-section="footer"><span>Contact</span></a></li>
          </ul>
        </div>
        </nav>

The sections are laid out like this:

<div class="fh5co-project" data-section="project">.....</div>

Doesn't highlight the section correctly. Doesn't highlight Class Schedule and Contact at all. There are no JS errors in the console. What could be the problem?

Answer 1

It is not easy to give an answer according to the piece of layout you provided. What is "scroll" connected to? How are clicks on links handled? What's going on in JS?
A working version according to the classic example:
https://codepen.io/Unuservize/pen/Wjjvqx
In your case, the answer to the question should help: "What makes the 'Class Schedule' and 'Contact' items so special in the layout?".