스크롤할 때 화면 상단에 Div \'고정\'을 만드는 방법은 무엇입니까?

스크롤하여 지나갈 때 Div를 화면 상단에 고정하는 방법

문제:

처음에는 페이지 상단에서 100px 떨어진 곳에 위치하며 필수 버튼이나 컨트롤을 포함하는 div입니다. 사용자가 이 div를 지나 아래로 스크롤할 때 쉽게 액세스할 수 있도록 화면 상단에 "고정"하기를 원합니다. 사용자가 다시 위로 스크롤하면 원래 위치로 돌아가기를 원합니다.

해결책:

비결은 position:fixed 속성을 활용하는 데 있지만 그 이후에만 가능합니다. 사용자가 div를 지나서 스크롤했습니다. 이를 달성하는 방법은 다음과 같습니다.

JavaScript:

<code class="javascript">var $window = $(window),
    $stickyEl = $('#the-sticky-div'),
    elTop = $stickyEl.offset().top;

$window.scroll(function() {
    $stickyEl.toggleClass('sticky', $window.scrollTop() > elTop);
});</code>

이 코드는 창의 스크롤 이벤트를 캡처하고 사용자가 스크롤할 때 "고정" CSS 클래스를 동적으로 적용합니다.

CSS:

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

이 CSS는 div가 화면 상단에 고정되도록 "sticky" 클래스를 설정합니다. 기본적으로 position:fixed는 창을 기준으로 div를 배치하여 스크롤하는 동안 div가 맨 위에 유지되도록 합니다.

작동 방식:

페이지가 로드되면, div는 위에서 100px 위치에 있습니다. 사용자가 아래로 스크롤하면 JavaScript는 현재 스크롤 위치가 div의 초기 상단 위치를 초과하는지 확인합니다. 그렇다면 div에 "sticky" 클래스를 적용하여 화면 상단에 고정되도록 합니다. 사용자가 다시 위로 스크롤하면 프로세스가 반전되고 "고정" 클래스가 제거되어 div가 초기 위치를 다시 시작할 수 있습니다.

요약하면 이 솔루션은 효과적으로 div를 클래스에 "고착"시킵니다. 사용자가 스크롤하면 화면 상단에 표시되고, 다시 위로 스크롤하면 원래 위치로 돌아갈 수 있습니다.

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