Более эффективный способ реализации пользовательского jQuery кода?

Разработка
1

У меня возникла проблема с моим кодом jQuery — он срабатывает не всегда.

Я пытаюсь переключать класс, когда пользователь прокручивает страницу более чем на 70 пикселей. В целом это работает, но не стабильно.

Например, иногда после редактирования темы или создания/редактирования категории, а затем нажатия на логотип для возврата на главную страницу, код перестаёт работать, пока я не обновлю страницу.

Я мог бы использовать нативный класс docker, но в моём случае он добавляется только после прокрутки всей высоты секции «герой», а мне нужно, чтобы класс добавлялся раньше.

Так есть ли лучший способ включения пользовательского кода jQuery в тему Discourse?

Вот код, который я использую:

$(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, одностраничное приложение. Это также означает, что скрипты, которые вы добавляете в тег <head>, выполняются только один раз при первоначальной загрузке страницы, если вы не используете правильные методы. Возможно, вам потребуется изменить свой код так, чтобы он срабатывал на основе обработчика событий или слушателя.

Надеюсь, это поможет.

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');  
    }   
  });	  
});