Uma maneira melhor de implementar código jQuery personalizado?

Dev
1

Estou tendo um problema com meu código jQuery, que nem sempre é acionado.

O que estou tentando fazer é alternar uma classe quando o usuário rolar mais de 70px. Funciona bem, mas nem sempre.

Por exemplo, às vezes, após editar um tópico ou criar/editar uma categoria e clicar no logotipo para voltar à página inicial, o código não funciona, a menos que eu atualize a página.

Eu também poderia usar a classe nativa do Discourse, mas no meu exemplo ela é adicionada apenas após rolar toda a altura da seção hero, e eu quero que a classe seja adicionada antes disso.

Então, existe uma maneira melhor de incluir códigos jQuery personalizados em um tema do Discourse?

O código que estou usando:

$(function() {
    // Armazena em cache um objeto jQuery contendo o elemento do cabeçalho
    var header = $("body.categories-list .d-header-wrap, body.navigation-topics .d-header-wrap");
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();
        if (scroll >= 70) {
            header.addClass("cd-active");
        } else {
            header.removeClass("cd-active");
        }
    });
});

Tema de teste:

https://theme-creator.discourse.org/?preview_theme_id=4529

2

O Discourse é um SPA, uma aplicação de página única. Isso também significa que os scripts JavaScript que você adiciona dentro de <head> são executados apenas uma vez no carregamento inicial da página, a menos que você utilize os métodos corretos. Pode ser necessário alterar seu código para disparar com base em um manipulador ou ouvinte de eventos.

Espero ter ajudado.

2 curtidas
3

Sim, acho que deveria, mas enquanto isso, encontrei a solução. O problema era que eu estava usando body.categories-list em vez de body.navigation-categories. O body.categories-list também é usado nas páginas de subcategorias e, enquanto eu estava nessas páginas, o código não funcionava de jeito nenhum (não faço ideia do motivo).

Edição: Ainda o mesmo problema, nem sempre funciona.

4

Mudei meu código e parece que agora funciona, mas ele dispara em todas as páginas. No meu código anterior, eu estava tentando isolar o código apenas nas páginas .navigation-categories e .navigation-topics, mas provavelmente esse é o problema. De qualquer forma, toda ajuda é apreciada. Obrigado.

$(function() {
   $(window).on("scroll touchmove", function () {
    if ($(this).scrollTop() > 70) {
      $('.d-header-wrap').addClass('cd-active');  
    } else {
      $('.d-header-wrap').removeClass('cd-active');  
    }   
  });	  
});