Add/remove class 和 jquery 基于垂直滚动结合 fullPage.js？

Question

我正在尝试 add/remove CSS 类（例如 "clearHeader" 和 "darkHeader"）与基于垂直滚动的 jQuery。这本身非常简单并且效果很好，但是当我尝试将它与 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：

有人以前遇到过这个问题或知道考虑这种不规则滚动的解决方法脚本吗？（基本上是整页 "toggles" 之间的整页部分，可通过按 down/up 键或通过一次鼠标滚动访问）。

Answer 1

如果您阅读 fullPage.js FAQs you will see this:

jQuery scroll event doesn't work.
Same answer as Parallax doesn't work with fullpage.js

即：

Short answer: use the scrollBar:true option for fullPage.js or autoScrolling:false if you don't want to use the auto-scrolling feature.

Explanation: Parallax, as well as many other plugins which depends on the scrolling of the site, listens the scrollTop property of javascript. fullPage.js doesn't actually scroll the site but it changes the top or translate3d property of the site. Only when using the fullPage.js option scrollBar:true or autoScrolling:false it will actually scroll the site in a way it is accessible for the scrollTop property.

给你。如果没有滚动条，那么你会从一个部分跳到另一个部分，所以在你的情况下，最合乎逻辑的做法是使用 fullPage.js 提供的回调，例如 afterLoad、onLeave, afterSlideLoad 或 onSlideLeave.

或者，如果您只想处理 css，fullPage.js 根据当前页面的 section/slide 添加 class 到正文。

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

body.fp-viewing-secondPage .demo{
   display:none;
}
body.fp-viewing-thirdPage .demo{
    display:block
}

Add/remove class 和 jquery 基于垂直滚动结合 fullPage.js？

Add/remove class with jquery based on vertical scroll combined with fullPage.js?

jquery

scroll

fullpage.js