javascript - 正文上的删除类不适用于 pagepiling.js

Question

我使用pagepiling.js创建了一个网站，该脚本在视口中的部分添加了“活动”类。现在我想在我的身体上添加一个类，section1就像active这样：

$(document).ready(function() {
    if ($('#section1').hasClass("active") === true) {
        $('body').toggleClass("one");
    }
});

它运行良好（该类已添加到主体上）但是当我滚动时我section1没有该类active，因为我现在在section2，主体上的类不会被删除。我该如何解决？我也试过：

$(document).ready(function() {
    if ($('#section1').hasClass('active')) {
        $('body').addClass('one');
    }
    else {
        $('body').removeClass('one');
    }
});

但它不起作用。

Answer 1

您必须将您的条件放在滚动事件中，因为您应该在每次用户滚动时检查：

$('body').on('scroll', function() {
    if ( $('#section1').hasClass("active") ){
        $('body').toggleClass("one");
    }
});

希望这可以帮助。

Answer 2

现在我想在我的 section1 处于活动状态时在我的身体上添加一个类

你其实不需要。

PagePiling.js 使用表单为您添加一个类到body元素中pp-viewing-page2。您可以在演示页面的 DOM 检查器中检查它。

但是，如果您仍然想添加一个类，只需使用插件提供的回调，如下所示：

$('#pagepiling').pagepiling({
    afterLoad: function(anchorLink, index){
        if(index == 1){
            $('body').addClass('one');
        }else{
            $('body').removeClass('one');
        }           
    }
});