基于垂直滚动结合fullPage.js的jquery添加/删除类？答案

【问题标题】：Add/remove class with jquery based on vertical scroll combined with fullPage.js?基于垂直滚动结合fullPage.js的jquery添加/删除类？
【发布时间】：2015-02-05 08:21:15
【问题描述】：

我正在尝试使用基于垂直滚动的 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：

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

【问题讨论】：

你能做一个jsfiddle吗
我意识到问题在于缺少滚动条，因为当我添加滚动条时，它工作得很好。那么需要的是一个不依赖滚动条的解决方法脚本。见 jsfiddle：jsfiddle.net/84bywp2z/1

标签： jquery scroll fullpage.js

【解决方案1】：

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

jQuery 滚动事件不起作用。
与视差相同的答案不适用于 fullpage.js

这是：

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

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

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

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

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

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

【讨论】：