如何使用 jQuery 根据垂直滚动位置添加和删除 CSS 类？

基于垂直滚动使用 jQuery 添加/删除类

在这种情况下，目标是从“标题”中删除该类一旦用户向下滚动一定距离，元素就会应用不同的类来改变其外观。然而，由于一些小错误，提供的代码无法按预期运行。

更正后的代码如下：

$(window).scroll(function() {
    var scroll = $(window).scrollTop();

    // >=, not <=
    if (scroll >= 500) {
        // clearHeader, not clearheader - caps H
        $(".clearHeader").addClass("darkHeader");
    }
});

主要问题有三个：

1. 比较运算符不正确；应该是 >= 来检查滚动位置是否大于或等于 500。
2. 要删除的类名被错误地拼写为clearheader，而不是clearHeader。
3. ;函数声明末尾缺少。

除了修复这些错误之外，请考虑以下事项：

• 与其删除clearHeader 类，不如添加darkHeader 类。这会在修改标题外观的同时保留标题的位置。
• 要在向上滚动时重置类，请使用第二个条件，如下所示：

if (scroll >= 500) {
    $(".clearHeader").addClass("darkHeader");
} else {
    $(".clearHeader").removeClass("darkHeader");
}

最后，缓存标头的 jQuery 对象可以提高性能，特别是如果您计划多次修改其类：

var header = $(".clearHeader");
$(window).scroll(function() {
    var scroll = $(window).scrollTop();

    if (scroll >= 500) {
        header.removeClass('clearHeader').addClass("darkHeader");
    } else {
        header.removeClass("darkHeader").addClass('clearHeader');
    }
});

通过解决这些问题问题，您现在可以根据用户的垂直滚动位置有效地在标题中添加和删除类。

以上是如何使用 jQuery 根据垂直滚动位置添加和删除 CSS 类？的详细内容。更多信息请关注PHP中文网其他相关文章！