使用 fullpage.js 在固定元素上滚动后添加或删除 css 类答案

【问题标题】：Add or remove css class after scrolling on fixed element while using fullpage.js使用 fullpage.js 在固定元素上滚动后添加或删除 css 类
【发布时间】：2016-03-03 22:35:52
【问题描述】：

我正在使用 fullpage.js 构建一个固定滚动页面。这是粗略的例子>https://pages.devex.com/Fixed-Scroll-Test.html

滚动到第二部分后，我想为“logo”（固定在左上角）添加一个额外的类，假设为 color:white。

我想实现这一点，因为我将使用黑白背景，并且希望在导航元素中具有良好的对比度。

我正在使用这样的东西，但我不工作，也许它干扰了 fullpage.js？

        if ( $('body').scrollTop() > $('#section1').position.top ) {
            $('.devexlogo').addClass('white');
        }

【问题讨论】：

标签： javascript jquery html scroll fullpage.js

【解决方案1】：

看起来 fullpage.js 与 jQuery 获取窗口的 scrollTop() 的方式有冲突，但 fullpage.js 实际上有一些内置的东西可以帮助你。将onLeave 部分添加到您的代码中

    $(document).ready(function() {
        $('#fullpage').fullpage({
            anchors: ['firstPage', 'secondPage', '3rdPage'],
            sectionsColor: ['#999999', '#F1F1F1', '#7E8F7C'],
            navigation: true,
            navigationPosition: 'right',
            navigationTooltips: ['First page', 'Second page', 'Third and last page'],
            responsiveWidth: 900,
            onLeave: function(index, nextIndex, direction){
                if (nextIndex != 1){
                    $('.devexlogo').addClass('white');
                } else {
                    $('.devexlogo').removeClass('white');
                }
            }
        });
    });

作为旁注，您的代码无论如何都有错误，您缺少()。本来是

$('#section1').position().top

【讨论】：

【解决方案2】：

谢谢大家的回答。

幸运的是，fullpage.js 为活动部分分配了一个特殊的类。类似 fp-viewing-sectionname

所以我最终使用它来为我需要更改的元素指定特殊的 css 规则。

这个参考帮助很大：https://www.youtube.com/watch?v=qiCVPpI9l3M

【讨论】：

【解决方案3】：

你得到的代码 sn-p 只加载一次（这将导致不添加类）。

你想要这样的东西：

$("#fullpage").scroll(function(){
  //your code here
});

确保您调用此函数的容器附加了overflow: scroll CSS 属性！在此处查看更多信息：https://api.jquery.com/scroll/

【讨论】：

fullpage.js 不会让你玩滚动事件，除非你使用 fullpagej.s 选项scrollBar:true