jQuery를 사용하여 수직 스크롤 위치에 따라 헤더의 클래스를 어떻게 동적으로 변경할 수 있습니까?

세로 스크롤을 사용한 JQuery 기반 클래스 조작

문제:

수정하려고 합니다. 사용자가 스크롤할 때 헤더 요소의 클래스로 모양이 변경됩니다. 그러나 현재 접근 방식은 예상대로 작동하지 않습니다.

해결책:

<br>$(window).scroll(function() {</p>
<pre class="brush:php;toolbar:false">var scroll = $(window).scrollTop();

// Update using correct operator (>=, not <=)
if (scroll >= 500) {
    // Use correct class name (clearHeader, not clearheader)
    $(".clearHeader").addClass("darkHeader");
}

});

올바른 구문:

> = 연산자와 ClearHeader 클래스 이름이 중요합니다. 또한, 고정된 위치 지정과 다시 선택될 수 있는 기능이 제거되므로 ClearHeader 클래스를 제거하지 마십시오.

클래스 재설정:

다음 경우에 클래스 수정을 재설정하려면 위쪽으로 스크롤하려면 이것을 사용하십시오 코드:

<br>$(window).scroll(function() {</p>
<pre class="brush:php;toolbar:false">var scroll = $(window).scrollTop();

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

});

성능 최적화:

효율성을 높이려면 헤더의 jQuery 객체를 캐시하세요.

<br>$(function() {</p>
<pre class="brush:php;toolbar:false">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 중국어 웹사이트의 기타 관련 기사를 참조하세요!