¿Una mejor manera de implementar código jQuery personalizado?

Desarrollador
1

Estoy teniendo un problema con mi código jQuery, que no siempre se activa.
Lo que intento hacer es alternar una clase cuando el usuario hace scroll más de 70 píxeles. Funciona bien, pero no siempre.

Por ejemplo, a veces después de editar un tema o crear/editar una categoría y luego hacer clic en el logotipo para volver a la página de inicio, el código no funciona a menos que recargue la página.

También podría usar la clase nativa de Docker, pero en mi ejemplo se agrega solo después de hacer scroll por toda la altura de la sección hero, y quiero que la clase se agregue antes.

Entonces, ¿hay una mejor manera de incluir código jQuery personalizado en un tema de Discourse?

El código que estoy usando:

$(function() {
    // Cacha un objeto jQuery que contiene el elemento del encabezado
    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 prueba:

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

2

Discourse es una SPA, una aplicación de una sola página. Esto también significa que los scripts de JavaScript que agregas en <head> solo se ejecutan una vez en la carga inicial de la página, a menos que utilices los métodos correctos. Es posible que necesites modificar tu código para que se active en respuesta a un manejador o escucha de eventos.

Espero que esto ayude.

3

Sí, creo que debería, pero mientras tanto, he encontrado la solución. El problema era que estaba usando body.categories-list en lugar de body.navigation-categories. body.categories-list también se utiliza en las páginas de subcategorías y, cuando estaba en esas páginas, el código no funcionaba en absoluto (no tengo idea de por qué).

Edición: Sigue siendo el mismo problema, no siempre funciona.

4

He modificado mi código y parece que ahora funciona, pero se ejecuta en todas las páginas. En mi código anterior, intentaba aislar la lógica solo para las páginas .navigation-categories y .navigation-topics, pero probablemente ese sea el problema. De todos modos, agradezco cualquier ayuda. Gracias.

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