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

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

문제:

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

해결책:

<br>$(window).scroll(function() {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><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>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">var scroll = $(window).scrollTop();

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

로그인 후 복사