Un modo migliore per implementare codice jQuery personalizzato?

Sviluppatore
1

Sto riscontrando un problema con il mio codice jQuery, che non viene sempre attivato.

Quello che sto cercando di fare è aggiungere o rimuovere una classe quando l’utente scorre più di 70px. Funziona bene, ma non sempre.

Ad esempio, a volte dopo aver modificato un argomento o creato/modificato una categoria e poi cliccato sul logo per tornare alla homepage, il codice non funziona a meno che non ricarichi la pagina.

Potrei anche usare la classe nativa di Discourse, ma nel mio esempio viene aggiunta solo dopo aver scorretto l’intera altezza della sezione hero, mentre vorrei che la classe venisse aggiunta prima.

Quindi, c’è un modo migliore per includere codice jQuery personalizzato in un tema Discourse?

Ecco il codice che sto usando:

$(function() {
    // Memorizza un oggetto jQuery contenente l'elemento dell'intestazione
    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 di test:

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

2

Discourse è un’applicazione a pagina singola (SPA). Questo significa anche che gli script JavaScript aggiunti in <head> vengono eseguiti una sola volta al caricamento iniziale della pagina, a meno che non vengano utilizzati i metodi corretti. Potrebbe essere necessario modificare il codice in modo che venga attivato in base a un gestore o un listener di eventi.

Spero ti sia utile.

2 Mi Piace
3

Sì, penso di sì, ma nel frattempo ho trovato la soluzione. Il problema era che stavo usando body.categories-list invece di body.navigation-categories. body.categories-list viene utilizzato anche nelle pagine delle sottocategorie e, mentre mi trovavo su quelle pagine, il codice non funzionava affatto (non ho idea del perché).

Modifica: Lo stesso problema persiste, non funziona sempre.

4

Ho modificato il mio codice e sembra che ora funzioni, ma viene attivato su ogni pagina. Nel mio codice precedente, stavo cercando di isolare l’esecuzione solo sulle pagine .navigation-categories e .navigation-topics, ma probabilmente questo è il problema. Comunque, ogni aiuto è apprezzato. Grazie.

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