إضافة/إزالة الفصل مع jQuery استنادًا إلى التمرير العمودي ومع ذلك ، فإن الرمز المقدم لا يعمل كما هو موضح بسبب بعض الأخطاء البسيطة.

الرمز المصحح هو كما يلي:

$(window).scroll(function() {
    var scroll = $(window).scrollTop();

    // >=, not = 500) {
        // clearHeader, not clearheader - caps H
        $(".clearHeader").addClass("darkHeader");
    }
});

كان عامل المقارنة غير صحيح ؛ يجب أن يكون> ​​= للتحقق مما إذا كان موضع التمرير أكبر من أو يساوي 500. كان مفقودًا في نهاية إعلان الوظيفة. هذا يحافظ على موضع الرأس أثناء تعديل مظهره. $ (". clearheader"). addClass ("darkheader") ؛ } آخر { $ (". }

أخيرًا ، يمكن أن يؤدي تخزين كائن jQuery للرأس إلى تحسين الأداء ، خاصة إذا كنت تخطط لتعديل فئته عدة مرات:
var header = $ (". clearheader") ؛ $ (window) .scroll (function () { var scroll = $ (window) .ScrollTop () ؛ if (scroll> = 500) { header.removeclass ('clearheader'). addClass ("darkheader") ؛ } آخر { header.removeclass ("darkheader"). addClass ('clearheader') ؛ } }) ؛
من خلال معالجة هذه المشكلات ، يمكنك الآن إضافة وإزالة الفئات من الرأس بناءً على موضع التمرير الرأسي للمستخدم.