Une meilleure façon d'implémenter du code jQuery personnalisé ?

Dev
1

Je rencontre un problème avec mon code jQuery qui ne se déclenche pas toujours.

Ce que j’essaie de faire, c’est basculer une classe lorsque l’utilisateur fait défiler la page de plus de 70 px. Cela fonctionne bien, mais pas systématiquement.

Par exemple, parfois, après avoir édité un sujet ou créé/édité une catégorie, puis en cliquant sur le logo pour revenir à la page d’accueil, le code ne fonctionne plus, sauf si je rafraîchis la page.

Je pourrais aussi utiliser la classe native de Discourse, mais dans mon exemple, elle n’est ajoutée qu’après avoir fait défiler toute la hauteur de la section « hero », alors que je veux que la classe soit ajoutée plus tôt.

Alors, existe-t-il une meilleure façon d’inclure du code jQuery personnalisé dans un thème Discourse ?

Voici le code que j’utilise :

$(function() {
    // Met en cache un objet jQuery contenant l'élément en-tête
    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");
        }
    });
});

Thème de test :

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

2

Discourse est une SPA, une application monopage. Cela signifie également que les scripts JavaScript que vous ajoutez dans <head> ne s’exécutent qu’une seule fois au chargement initial de la page, sauf si vous utilisez les méthodes appropriées. Vous devrez peut-être modifier votre code pour qu’il se déclenche en fonction d’un gestionnaire ou d’un écouteur d’événements.

Cela devrait vous aider.

2 « J'aime »
3

Oui, je pense que je devrais, mais en attendant, j’ai trouvé la solution. Le problème venait du fait que j’utilisais body.categories-list au lieu de body.navigation-categories. body.categories-list est également utilisé sur les pages de sous-catégories et, alors que j’étais sur ces pages, le code ne fonctionnait pas du tout (je ne sais pas pourquoi).

Edit : Le problème persiste, cela ne fonctionne pas toujours.

4

J’ai modifié mon code et cela semble fonctionner maintenant, mais il se déclenche sur chaque page. Dans mon code précédent, j’essayais d’isoler le code uniquement sur les pages .navigation-categories et .navigation-topics, mais c’est probablement le problème. Quoi qu’il en soit, toute aide est appréciée. Merci.

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