jQuery를 사용하여 수직 스크롤 위치를 기반으로 CSS 클래스를 추가하고 제거하려면 어떻게 해야 합니까?

세로 스크롤 기반 jQuery를 사용하여 클래스 추가/제거

이 경우 목표는 "헤더"에서 클래스를 제거하는 것입니다. 사용자가 특정 거리만큼 아래로 스크롤하면 요소를 만든 다음 다른 클래스를 적용하여 모양을 변경합니다. 하지만, 제공된 코드가 일부 사소한 오류로 인해 의도한 대로 작동하지 않습니다.

수정된 코드는 다음과 같습니다.

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

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

크게 세 가지 문제가 있었습니다.

1. 비교 연산자가 잘못되었습니다. 스크롤 위치가 500보다 크거나 같은지 확인하려면 >=이어야 합니다.
2. 제거할 클래스 이름의 철자가 ClearHeader가 아닌 ClearHeader로 잘못되었습니다.
3. ; 함수 선언 끝에 가 누락되었습니다.

이러한 오류를 수정하는 것 외에도 다음을 고려하세요.

• clearHeader 클래스를 제거하는 대신 다음을 추가하는 것이 좋습니다. darkHeader 클래스를 추가하세요. 이렇게 하면 헤더의 모양이 수정되는 동안 헤더의 위치가 유지됩니다.
• 다시 위로 스크롤할 때 클래스를 재설정하려면 아래와 같이 두 번째 조건을 사용하세요.

if (scroll >= 500) {
    $(".clearHeader").addClass("darkHeader");
} else {
    $(".clearHeader").removeClass("darkHeader");
}

마지막으로 캐싱 헤더의 jQuery 객체는 특히 클래스를 여러 번 수정하려는 경우 성능을 향상시킬 수 있습니다.

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

    if (scroll >= 500) {
        header.removeClass('clearHeader').addClass("darkHeader");
    } else {
        header.removeClass("darkHeader").addClass('clearHeader');
    }
});

주소 지정을 통해 이러한 문제를 해결하려면 이제 사용자의 수직 스크롤 위치에 따라 헤더에서 클래스를 효과적으로 추가하고 제거할 수 있습니다.

위 내용은 jQuery를 사용하여 수직 스크롤 위치를 기반으로 CSS 클래스를 추가하고 제거하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!