使用基于垂直滚动的jquery添加/删除类？ [英] Add/remove class with jquery based on vertical scroll?

问题描述

所以基本上我想删除类从'header'后，用户向下滚动一点，并添加另一个类来改变它的外观。

So basically I'd like to remove the class from 'header' after the user scrolls down a little and add another class to change it's look.

尝试找出最简单的方法，但我不能让它工作。

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>

我相信我在做一些非常基本的错误。 >

I'm sure I'm doing something very elementary wrong.

推荐答案

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

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

小提琴

此外，通过删除 clearHeader 从元素中删除 position：fixed; 以及通过 $（clearHeader）重新选择它的能力 selector。我建议不要删除该类，并在其顶部添加一个新的CSS类为样式目的。

Also, by removing the clearHeader class, you're removing the position:fixed; from the element as well as the ability of re-selecting it through the $(".clearHeader") selector. I'd suggest not removing that class and adding a new CSS class on top of it for styling purposes.

如果你想重置用户向上滚动：

And if you want to "reset" the class addition when the users scrolls back up:

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

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

小提琴

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

edit: Here's version caching the header selector - better performance as it won't query the DOM every time you scroll and you can safely remove/add any class to the header element without losing the reference:

$(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');
        }
    });
});

小提琴

这篇关于使用基于垂直滚动的jquery添加/删除类？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！