基于垂直滚动的jquery添加删除类

发布于09月24日

所以基本上我想在用户稍微向下滚动后从"Header"中删除这个类，并添加另一个类来改变它的外观.

Trying to figure out the simplest way of doing this but I can't make it work.

$(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>

我肯定我做错了什么.

推荐答案

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

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

Fiddle

此外，通过删除clearHeader类，您将从元素中删除position:fixed;，以及通过$(".clearHeader") Select 器重新 Select 它的能力.我建议不要删除该类，并在其上添加一个新的CSS类来进行样式设置.

如果你想在用户返回时"重置"类添加:

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

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

Fiddle

edit:以下是缓存标头 Select 器的版本-性能更好，因为它不会每次滚动时都查询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');
        }
    });
});

Fiddle