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

Question

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

我想在滚动到第二部分后向 "logo" 添加一个额外的 class（固定在左上角），假设是 color:white.

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

我正在使用类似的东西，但我没有用，也许它干扰了 fullpage.js？

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

Answer 1

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

你想要这样的东西：

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

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

Answer 2

看起来 fullpage.js 搞乱了 jQuery 获取 window 的 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

Answer 3

谢谢大家的回答。

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

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

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

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

Add or remove css class after scrolling on fixed element while using fullpage.js

html

javascript

jquery

scroll

fullpage.js