Getting jquery and css transition effects working together

Question

I have cloned this template :

http://ironsummitmedia.github.io/startbootstrap-grayscale/

When you scroll-down, notice that the background-color of the header-link(About, Download, contact) on top will change to gray color (depending upon the section where you have scrolled).

I have made some small changes to the header wherien I am including font-awesome icons. The color effect has however stopped working.

<ul class="nav navbar-nav nav-advance-options hide-this-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
    <li class="hidden">
        <a href="#page-top"></a>
    </li>
    <li>
        <a class="page-scroll" href="#flax">
            <i class="fa fa-leaf"></i>
        </a>
    </li>
    <li>
        <a class="page-scroll" href="#moist">
            <i class="fa fa-heart"></i>
        </a>
    </li>
    <li>
        <a class="page-scroll" href="#designs">
            <i class="fa fa-paw"></i>
        </a>
    </li>
</ul>

http://plnkr.co/edit/0MV3QzRpJcPWlpuNMDav

Answer 1

我不能确切地告诉您的JavaScript有通过您所提供的资产出了问题，但问题是，在网站上（的字体真棒图标版本http://plnkr.co/edit/0MV3QzRpJcPWlpuNMDav ）时， active滚动时不会将class添加到菜单li元素中，而是将其添加到演示站点（ http://ironsummitmedia.github.io/startbootstrap-grayscale/ ）的li元素中。

Answer 2

solved the issue by removing the following lines from second ul:

  <li class="hidden">
                <a href="#page-top"></a>
            </li>

I don't know why this solves the issue yet. If someone understands, kindly explain