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

我正在使用fullpage.js构建一个固定的滚动页面。这是一个粗略的例子>

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

我想做到这一点，因为我将使用黑白背景，我希望在导航元素中有良好的对比度

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

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

---

您得到的代码片段只加载一次（这将导致不添加类）

你想要这样的东西：

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

---

确保调用此函数的容器附带了

overflow:scroll

CSS属性！请参阅此处的更多信息：

看起来fullpage.js与jQuery获取窗口滚动条（）的方式不一样，但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

---

谢谢大家的回答

幸运的是，fullpage.js为活动部分添加了一个特殊类。类似于fp的名称

因此，我最终使用它来为我需要更改的元素指定特殊的css规则

---

这个ref帮助很大：

fullpage.js不允许您玩滚动事件，除非您使用fullpagej.s选项

scrollBar:true