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

집

웹 프론트엔드

CSS 튜토리얼

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

Susan Sarandon

Dec 03, 2024 pm 07:50 PM

How Can I Dynamically Change a Header's Class Based on Vertical Scroll Position Using 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");
}

로그인 후 복사

});

성능 최적화:

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

<br>$(function() {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.