如何正确添加和删除基于垂直滚动的jQuery类？

基于垂直滚动添加和删除 jQuery 类

在这种情况下，用户想要从“ header”元素，并在用户向下滚动时将其替换为“darkHeader”类，从而修改其外观。但是，提供的代码无法正常运行。

我们来分析一下原始代码：

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();    
    if (scroll <= 500) {
        $(".clearheader").removeClass("clearHeader").addClass("darkHeader");
    }
}

除了一些小的调整之外，还有两个重要问题：

• 不正确的运算符：比较运算符应该是“>=”而不是“<=”才能正确确定何时更改类。
• 选择器错误： 选择器“.clearheader”不正确，因为它包含小写“H”。正确的选择器应该是“.clearHeader”。

以下是解决这些错误的修订代码：

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    if (scroll >= 500) {
        $(".clearHeader").removeClass("clearHeader").addClass("darkHeader");
    }
});

此外，建议不要删除“clearHeader”类，因为它是负责固定标题。相反，应用一个新的 CSS 类来修改样式。

此外，如果您打算在用户向后滚动时恢复“clearHeader”类，请实现以下代码：

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

为了提高性能并避免重复查询 DOM，请考虑缓存标头选择器：

$(function() {
    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类？的详细内容。更多信息请关注PHP中文网其他相关文章！