] हालाँकि, प्रदान किया गया कोड कुछ मामूली त्रुटियों के कारण काम नहीं कर रहा है।

var स्क्रॉल = $ (विंडो) .scrolltop (); //> =, नहीं = 500) { // क्लियरहेडर, क्लियरहेडर नहीं - कैप्स एच $ ("। Clearheader")। AddClass ("Darkheader"); } }); यह यह जांचने के लिए होना चाहिए कि क्या स्क्रॉल की स्थिति 500 ​​से अधिक या बराबर है। फ़ंक्शन घोषणा के अंत में गायब था।

इन त्रुटियों को ठीक करने के अलावा, निम्नलिखित पर विचार करें:

को क्लियरहेड क्लास को हटाने के बजाय, डार्कहेडर वर्ग को इसमें जोड़ना बेहतर है। यह अपनी उपस्थिति को संशोधित करते समय हेडर की स्थिति को संरक्षित करता है।

वर्ग को रीसेट करने के लिए वापस स्क्रॉल करते समय, नीचे देखी गई दूसरी स्थिति का उपयोग करें: $ ("। Clearheader")। AddClass ("Darkheader"); } अन्य { $ ("। Clearheader")। RemoveClass ("Darkheader"); }

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

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

अंत में, हेडर के लिए JQuery ऑब्जेक्ट को कैशिंग करना प्रदर्शन में सुधार कर सकता है, खासकर यदि आप इसकी कक्षा को कई बार संशोधित करने की योजना बनाते हैं:

var हेडर = $ ("। क्लियरहेडर"); $ (विंडो) .scroll (फ़ंक्शन () { var स्क्रॉल = $ (विंडो) .scrolltop (); if (स्क्रॉल> = 500) { हेडर। removeclass ('क्लियरहेडर')। AddClass ("Darkheader"); } अन्य { हेडर.रेमोवेक्लास ("डार्कहेडर")। AddClass ('Clearheader'); } });