수직 스크롤을 기반으로 jQuery 클래스를 올바르게 추가하고 제거하는 방법은 무엇입니까?

세로 스크롤을 기반으로 jQuery 클래스 추가 및 제거

이 시나리오에서 사용자는 "clearHeader" 클래스를 " header" 요소를 삭제하고 사용자가 아래로 스크롤하면 해당 요소를 "darkHeader" 클래스로 대체하여 모양을 수정합니다. 그러나 제공된 코드가 올바르게 작동하지 않습니다.

원본 코드를 분석해 보겠습니다.

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();    
    if (scroll <= 500) {
        $(".clearheader").removeClass("clearHeader").addClass("darkHeader");
    }
}

몇 가지 사소한 조정 외에도 두 가지 중요한 문제가 있습니다.

• 잘못된 연산자: 비교 연산자는 "<=" 대신 ">="이어야 합니다. 클래스를 변경해야 하는 시기를 올바르게 식별합니다.
• 선택기 오류: 선택기 ".clearheader"에 소문자 "H"가 포함되어 있으므로 올바르지 않습니다. 올바른 선택기는 ".clearHeader"여야 합니다.

다음은 이러한 오류를 해결하는 수정된 코드입니다.

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    if (scroll >= 500) {
        $(".clearHeader").removeClass("clearHeader").addClass("darkHeader");
    }
});

또한 "clearHeader" 클래스는 제거하지 않는 것이 좋습니다. 헤더 고정을 담당합니다. 대신 새 CSS 클래스를 적용하여 스타일을 수정하세요.

또한 사용자가 다시 스크롤할 때 "clearHeader" 클래스를 복원하려는 경우 다음 코드를 구현하세요.

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

성능을 향상시키고 DOM에 대한 반복적인 쿼리를 방지하려면 헤더 선택기 캐싱을 고려하세요.

$(function() {
    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 클래스를 올바르게 추가하고 제거하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!