添加/删除基于垂直滚动的jQuery类？

小编典典

添加/删除基于垂直滚动的jQuery类？

javascript

因此，基本上，我想在用户向下滚动并添加另一个类以更改外观后从“标题”中删除该类。

试图找出最简单的方法，但我无法使其正常工作。

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

CSS

.clearHeader{
    height: 200px; 
    background-color: rgba(107,107,107,0.66);
    position: fixed;
    top:200;
    width: 100%;   
}

.darkHeader { height: 100px; }

.wrapper {
    height:2000px;
}

HTML

<header class="clearHeader">    </header>
<div class="wrapper">     </div>

我确定我在做一些非常基本的错误。

阅读 233

2020-05-01

共1个答案

小编典典

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

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

另外，通过删除clearHeader该类，可以position:fixed;从元素中删除，并可以通过$(".clearHeader")选择器重新选择它。我建议不要删除该类，并在其顶部添加一个新的CSS类以用于样式设置。

如果要在用户向上滚动时“重置”类添加，请执行以下操作：

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

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

编辑： 这是标题选择器的版本缓存-更好的性能，因为它不会在每次滚动时查询DOM，并且可以安全地删除/添加任何类到标题元素而不会丢失引用：

$(function() {
    //caches a jQuery object containing the header element
    var header = $(".clearHeader");
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();

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

2020-05-01