Adicionar/Remover classe com jQuery com base no vertical scroll

Nesta instância, o objetivo é remover a classe do elemento "cabeçalho" quando o usuário derrubar uma determinada distância e depois aplicar uma classe para alterar. No entanto, o código fornecido não está funcionando como pretendido devido a alguns erros menores. var scroll = $ (janela) .Scrolltop (); //> =, não = 500) { // clearheader, não clearheader - caps h $ (". clearheader"). addclass ("DarkHeader"); } });

Havia três questões principais:

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

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

o operador de comparação estava incorreto; Deve ser> = verificar se a posição de rolagem é maior ou igual a 500.

o nome da classe para remoção foi incorreto como clearHeader em vez de clearheader.

1. o; Faltava no final da declaração da função. Isso preserva a posição do cabeçalho enquanto modifica sua aparência. $ (". clearheader"). addclass ("DarkHeader"); } outro { $ (". Clearheader"). RemoveClass ("DarkHeader"); }
2. finalmente, o cache do objeto jQuery para o cabeçalho pode melhorar o desempenho, especialmente se você planeja modificar sua classe várias vezes:
3. var header = $ (". Clearheader"); $ (janela) .scroll (function () { var scroll = $ (janela) .Scrolltop (); if (roll> = 500) { header.removeClass ('clearheader'). addclass ("DarkHeader"); } outro { header.RemoveClass ("DarkHeader"). Addclass ('Clearheader'); } });

abordando esses problemas, agora você pode efetivamente adicionar e remover classes do cabeçalho com base na posição de rolagem vertical do usuário.