Question

我正在尝试使用基于垂直滚动的jQuery添加/删除CSS类（例如“clearHeader”和“darkHeader”）。这本身很容易并且运行良好，但是当我尝试将它与fullPage.js结合使用时（参见http://alvarotrigo.com/fullPage） - 它不起作用。

使用的脚本：

//<![CDATA[ 
    $(function() {
        var header = $("#fullpage");
        $(window).scroll(function() {    
            var scroll = $(window).scrollTop();

            if (scroll >= 500) {
                header.removeClass('clearHeader').addClass("darkHeader");
            } else {
                header.removeClass("darkHeader").addClass('clearHeader');
            }
        });
    });        
//]]>

参见jsfiddles：

仅脚本：http://jsfiddle.net/ccn469og/11/
仅限fullPage：http://jsfiddle.net/7s1yb1un/2/
：http://jsfiddle.net/84bywp2z/

之前有任何人遇到过这个问题，或者知道考虑过这种不规则滚动的变通办法脚本吗？（通过按向下/向上键或单个鼠标滚动可访问整页部分之间的基本全页“切换”）。

Answer 1

如果您阅读fullPage.js FAQs，则会看到this：

jQuery滚动事件无法正常工作。
与Parallax无法使用fullpage.js
相同的答案

这是：

简答：对fullPage.js或autoScrolling使用scrollBar：true选项：如果您不想使用自动滚动功能，请使用false。

  说明：Parallax以及依赖于网站滚动的许多其他插件，会侦听javascript的scrollTop属性。 fullPage.js实际上并未滚动网站，但它会更改网站的top或translate3d属性。仅当使用fullPage.js选项时，scrollBar：true或autoScrolling：false才会以scrollTop属性可访问的方式实际滚动网站。

你有它。如果没有滚动条，那么你将跳转到一节，所以在你的情况下，最合乎逻辑的做法是使用fullPage.js提供的回调，例如afterLoad，{{ 1}}，onLeave或afterSlideLoad。

或者，如果您只想处理css，fullPage.js会根据当前页面的部分/幻灯片向正文添加一个类。

您可以轻松地执行以下操作：

onSlideLeave

使用基于垂直滚动和fullPage.js的jquery添加/删除类？

1 个答案: