删除正文上的类不适用于页面堆积.js

Question

我使用pagepiling.js创建了一个网站，此脚本在视口中的部分添加了类"active"。现在我想在我的身体上添加一个类，当我的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

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

你实际上不需要。

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

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

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