수정 된 코드는 다음과 같습니다. var scroll = $ (창) .scrolltop (); //> =, = 500) { // ClearHeader, Clearheader가 아닌 Caps h $ ( ". ClearHeader"). addClass ( "Darkheader"); } });

세 가지 주요 문제가있었습니다. 스크롤 위치가 500 이상인지 또는 같은지 확인하는 것은> =이어야합니다. 제거의 클래스 이름은 Clearheader 대신 Clearheader로 철자가 틀 렸습니다.

; 함수 선언이 끝날 때 누락되었습니다.

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

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

1. Clearheader 클래스를 제거하는 대신 Darkheader 클래스를 추가하는 것이 좋습니다. 이것은 외관을 수정하면서 헤더의 위치를 ​​유지합니다.
2. 스크롤 할 때 클래스를 재설정하려면 아래에서 볼 수 있듯이 두 번째 조건을 사용합니다. $ ( ". ClearHeader"). addClass ( "Darkheader"); } 또 다른 { $ ( ". ClearHeader"). RemoveClass ( "Darkheader"); }
3. 마지막으로, 헤더의 jQuery 객체를 캐싱하면 특히 클래스를 여러 번 수정하려는 경우 :
var header = $ ( ". ClearHeader"); $ (창) .scroll (function () { var scroll = $ (창) .scrolltop (); if (scroll> = 500) { header.removeclass ( 'Clearheader'). addClass ( "Darkheader"); } 또 다른 { header.removeclass ( "Darkheader"). addClass ( 'Clearheader'); } });

이러한 문제를 해결함으로써 사용자의 수직 스크롤 위치를 기반으로 헤더에서 클래스를 효과적으로 추가하고 제거 할 수 있습니다.