طريقة أفضل لتنفيذ كود jQuery مخصص؟

مطور
1

أواجه مشكلة في كود jQuery الخاص بي، حيث لا يتم تفعيله دائمًا.
ما أحاول القيام به هو تبديل فئة (class) عندما يقوم المستخدم بالتمرير لأكثر من 70 بكسل. يعمل الكود بشكل جيد ولكن ليس دائمًا.

على سبيل المثال، في بعض الأحيان بعد تعديل موضوع أو إنشاء/تعديل فئة ثم النقر على الشعار للعودة إلى الصفحة الرئيسية، لا يعمل الكود إلا إذا قمت بتحديث الصفحة.

يمكنني أيضًا استخدام فئة Docker الأصلية، ولكن في مثالتي يتم إضافتها فقط بعد التمرير على كامل ارتفاع قسم البطل (hero section)، بينما أريد إضافة الفئة في وقت أبكر.

إذن، هل هناك طريقة أفضل لتضمين أكواد 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

ديسكوس هو تطبيق صفحة واحدة (SPA). وهذا يعني أيضًا أن ملفات الجافاسكريبت التي تضيفها داخل وسم <head> تُنفَّذ مرة واحدة فقط عند تحميل الصفحة الأولية، ما لم تستخدم الطرق الصحيحة. قد تحتاج إلى تعديل كودك ليُفعَّل استنادًا إلى معالج حدث أو مستمع للأحداث.

أتمنى أن يكون ذلك مفيدًا.

إعجابَين (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');  
    }   
  });	  
});