实现自定义 jQuery 代码的更好方法？

开发
1

我的 jQuery 代码存在问题，并非总是被触发。
我想实现的是：当用户滚动超过 70 像素时切换某个类。虽然它能正常工作，但并非总是如此。

例如，有时在编辑主题或创建/编辑分类后，点击 Logo 返回首页时，该代码就无法生效，除非刷新页面。

我也可以使用原生的 .d-header 类，但在我的示例中，该类只有在滚动完整个英雄区块的高度后才会被添加，而我希望更早地添加该类。

那么，在 Discourse 主题中是否有更好的方式来包含自定义 jQuery 代码？

我使用的代码如下：

$(function() {
    // 缓存包含 header 元素的 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> 中添加的 JavaScript 仅在初始页面加载时执行一次，除非你使用正确的方法。你可能需要修改代码，使其基于事件处理器/监听器来触发。

希望这能帮到你。

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