カスタムjQueryコードを実装するより良い方法？

開発
1

jQueryのコードで問題が発生しており、常にトリガーされないことがあります。
私が行おうとしているのは、ユーザーが70px以上スクロールしたときにクラスを切り替えることです。通常は正常に動作しますが、必ずしもそうではありません。

例えば、トピックを編集したり、カテゴリを作成・編集した後、ロゴをクリックしてホームページに戻る際、ページをリフレッシュしない限りコードが機能しないことがあります。

ネイティブのd-headerクラスを使用することも可能ですが、私の例ではヒーローセクション全体の高さをスクロールするまでクラスが追加されないため、もう少し早くクラスを追加したいと考えています。

DiscourseテーマにカスタムjQueryコードを組み込むより良い方法はありますか？

使用しているコードは以下の通りです：

$(function() {
    // ヘッダー要素を含むjQueryオブジェクトをキャッシュ
    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");
        }
    });
});

テストテーマ：

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

2

Discourse は SPA（シングルページアプリケーション）です。つまり、\u003chead\u003e に追加した JavaScript は、適切なメソッドを使用しない限り、最初のページ読み込み時に一度しか実行されません。イベントハンドラやリスナーに基づいてコードを実行するように変更する必要があるかもしれません。

参考になれば幸いです。

「いいね！」 2
3

はい、そうすべきだと思いますが、その間に修正方法を見つけました。問題は、body.categories-list の代わりに body.navigation-categories を使っていたことです。body.categories-list はサブカテゴリページでも使われており、それらのページにいる間はコードがまったく動作しませんでした（なぜか分かりません）。

編集：まだ同じ問題で、常に動作しているわけではありません。

4

コードを変更したところ、現在は動作するようですが、すべてのページで発火してしまいます。以前のコードでは、.navigation-categories と .navigation-topics のページでのみコードを限定しようとしていましたが、おそらくそこが問題だったのでしょう。いずれにせよ、ご支援いただければ幸いです。ありがとうございます。

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