스크롤하는 동안 Div 스틱을 화면 상단에 만드는 방법은 무엇입니까?

스크롤하는 동안 화면 상단에 Div 유지

특정 시나리오에서는 div가 화면 상단에 달라붙는 것이 바람직합니다. 사용자가 화면을 아래로 스크롤하면 웹페이지를 탐색할 때 효과적으로 '따라가게' 됩니다. 이 동작을 통해 버튼이나 탐색 컨트롤과 같은 필수 요소에 쉽게 액세스할 수 있습니다.

이 효과를 얻으려면 다음 전략을 사용할 수 있습니다.

JavaScript 코드:

<code class="js">// Cache jQuery objects for performance optimization.
var $window = $(window),
    $stickyEl = $('#the-sticky-div'),
    elTop = $stickyEl.offset().top;

// Attach a handler to the window's scroll event.
$window.scroll(function() {
    // Determine if the div has been scrolled past.
    if ($window.scrollTop() > elTop) {
        // Add a CSS class to make the div sticky.
        $stickyEl.addClass('sticky');
    } else {
        // Remove the sticky class when the user scrolls back up.
        $stickyEl.removeClass('sticky');
    }
});</code>

CSS 클래스:

<code class="css">#the-sticky-div.sticky {
    position: fixed;
    top: 0;
}</code>

설명:

JavaScript 코드는 초기에 jQuery 개체를 캐시합니다. 더 나은 성능. 그런 다음 사용자가 수직으로 스크롤할 때마다 트리거되는 스크롤 이벤트 리스너를 창에 추가합니다. 리스너 내에서 창의 스크롤 위치와 페이지 상단의 div 오프셋을 비교하여 div가 스크롤되었는지 확인합니다. 스크롤 위치가 오프셋보다 크면 고정 CSS 클래스가 div에 추가되어 위치가 고정으로 설정되고 화면 상단에 배치됩니다. 반대로, 사용자가 다시 위로 스크롤하고 스크롤 위치가 오프셋보다 작으면 고정 클래스가 제거되고 div가 원래 위치로 돌아갑니다.

위 내용은 스크롤하는 동안 Div 스틱을 화면 상단에 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!