skrollr在滚动上添加/删除类

时间:2015-09-15 14:30:07

标签: javascript jquery html css skrollr

我在scroll函数的removeClass / addClass上遇到了prinzhorn / skrollr插件的问题。 我已经尝试过查找并获得此方法,但对我来说没有运气。

<li class="tab col s3"><a data-800="@class: active" data-1000="@class: active" href="#test1">Test 1</a></li>
<li class="tab col s3"><a data-1100="@class: active" data-1300="@class: active" href="#test2">Test 2</a></li>

请在没有添加类数据属性的情况下检查我的部分代码。

<div id="about"
    data-0="display: none;"
    data-500="display: block; top: 100%;"
    data-800="top: 0%;"
    data-3000="top: 0%;"
    data-3100="top: -100%;"
>
    <div class="inner">
        <div class="row" id="tab-nav">
            <div class="col s12">
                <ul class="tabs">
                    <li class="tab col s3"><a href="#test1">Test 1</a></li>
                    <li class="tab col s3"><a href="#test2">Test 2</a></li>
                    <li class="tab col s3"><a href="#test3">Disabled Tab</a></li>
                    <li class="tab col s3"><a href="#test4">Test 4</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

或者你在这里检查小提琴&gt; http://jsfiddle.net/8L6urrt5/

任何帮助都会很棒!先谢谢!

1 个答案:

答案 0 :(得分:4)

在数据属性中使用@class实际上并不是滚动器的一个功能,只是在这里讨论了一个被请求的功能:github.com/Prinzhorn/skrollr/issues/99。

您可以通过执行以下操作,以类似的方式使用data-attributes添加CSS:

<div class="blah" data-100="@myAttr: 0;" data-200="@myAttr: 1;" data-300="@myAttr: 1;" data-400="@myAttr: 0;" ></div>

.blah[myAttr="1"]{
    /* your style */
}

此解决方案由同一个github线程中的注释提供:github.com/Prinzhorn/skrollr/issues/99#issuecomment-68102729