javascript - 使用fullpage.js在固定元素上滚动后添加或删除CSS类

我使用fullpage.js来构建一个固定的滚动页面。下面是一个粗略的例子
我想在滚动到第二部分后，在“logo”（固定在左上角）中添加一个额外的类，比如说是color:white。
我想做到这一点，因为我将使用黑白背景，我想在导航元素有良好的对比度。
我正在使用类似的东西，但我不工作，也许它干扰了fullpage.js？

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

最佳答案

看起来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

关于javascript - 使用fullpage.js在固定元素上滚动后添加或删除CSS类，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35784445/