让 jquery 和 css 过渡效果一起工作答案

【问题标题】：Getting jquery and css transition effects working together让 jquery 和 css 过渡效果一起工作
【发布时间】：2015-02-07 02:41:31
【问题描述】：

我已经克隆了这个模板：

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

【问题讨论】：

什么颜色效果停止工作了？头部链接的背景颜色改变了我的颜色。这与字体真棒图标有什么关系？
我创建的 plnkr 无法做到这一点
好的，我明白了。我只是在看演示网站。

标签： javascript css twitter-bootstrap

【解决方案1】：

我无法通过您提供的资产准确判断您的 javascript 哪里出了问题，但问题是在网站的字体真棒图标版本 (http://plnkr.co/edit/0MV3QzRpJcPWlpuNMDav) 上，active 类不是滚动时被添加到菜单 li 元素中，而它被添加到演示站点上的 li 元素中 (http://ironsummitmedia.github.io/startbootstrap-grayscale/)。

【讨论】：

感谢您指出这一点。它没有解决问题，但指引我朝着正确的方向前进

【解决方案2】：

通过从第二个 ul 中删除以下行解决了这个问题：

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

我还不知道为什么这可以解决问题。如果有人明白，请解释一下

【讨论】：

非常好 - 很高兴听到詹姆斯的声音！