使jQuery和CSS過渡效果協同工作

Question

我已經克隆了這個模板：

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

向下滾動時，請注意，頂部標題鏈接（關於，下載，聯系人）的背景顏色將變為灰色（取決於您滾動的部分）。

我對標題（包括字體真棒圖標）做了一些小的更改。 但是，色彩效果已停止工作。

<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

通過從第二個ul中刪除以下幾行來解決此問題：

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

我不知道為什么這可以解決問題。 如果有人理解，請解釋