Question

我克隆了这个模板：

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

向下滚动时，请注意顶部标题链接（关于，下载，联系人）的背景颜色将变为灰色（取决于您滚动的部分）。

我对标题wherien进行了一些小改动，包括字体真棒图标。然而，色彩效果停止了。

<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类未添加到菜单li元素中，而是添加到演示网站上的li元素（http://ironsummitmedia.github.io/startbootstrap-grayscale/）。

Answer 2

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

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

我不知道为什么这解决了这个问题。如果有人理解，请善解释

让jquery和css过渡效果协同工作

2 个答案: