Ein besserer Weg, benutzerdefinierten jQuery-Code zu implementieren?

Entwickler
1

Ich habe ein Problem mit meinem jQuery-Code, der nicht immer ausgelöst wird.

Ich möchte eine Klasse umschalten, wenn der Benutzer mehr als 70 px gescrollt hat. Das funktioniert zwar, aber nicht immer.

Zum Beispiel funktioniert der Code manchmal nicht, nachdem ich ein Thema bearbeitet oder eine Kategorie erstellt/bearbeitet und dann auf das Logo geklickt habe, um zur Startseite zurückzukehren, es sei denn, ich aktualisiere die Seite.

Ich könnte auch die native Docker-Klasse verwenden, aber in meinem Beispiel wird diese erst hinzugefügt, nachdem die gesamte Höhe des Hero-Bereichs gescrollt wurde. Ich möchte jedoch, dass die Klasse früher hinzugefügt wird.

Gibt es also eine bessere Möglichkeit, benutzerdefinierten jQuery-Code in ein Discourse-Theme einzubinden?

Der von mir verwendete Code:

$(function() {
    // Cacht ein jQuery-Objekt, das das Header-Element enthält
    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");
        }
    });
});

Test-Theme:

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

2

Discourse ist eine SPA, eine Single-Page-Anwendung. Das bedeutet auch, dass die JavaScripts, die du in <head> hinzufügst, nur einmal beim initialen Laden der Seite ausgeführt werden, es sei denn, du verwendest die richtigen Methoden. Möglicherweise musst du deinen Code so anpassen, dass er basierend auf einem Event-Handler bzw. einem Event-Listener ausgelöst wird.

HTH

3

Ja, ich denke, das sollte ich tun, aber in der Zwischenzeit habe ich die Lösung gefunden. Das Problem war, dass ich body.categories-list anstelle von body.navigation-categories verwendet habe. body.categories-list wird auch auf Unterkategorien-Seiten verwendet, und während ich mich auf diesen Seiten befand, funktionierte der Code überhaupt nicht (ich habe keine Ahnung, warum).

Edit: Immer noch das gleiche Problem, es funktioniert nicht immer.

4

Ich habe meinen Code geändert, und es scheint jetzt zu funktionieren, aber er wird auf jeder Seite ausgelöst. In meinem vorherigen Code habe ich versucht, den Code nur auf den Seiten .navigation-categories und .navigation-topics zu isolieren, aber das ist wahrscheinlich das Problem. Jedenfalls wäre jede Hilfe willkommen. Danke.

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