스크롤 시 Div를 고정시키는 방법: 고정 위치 지정 및 이벤트 처리에 대한 가이드?

Sticky Div: 스크롤 시 화면 상단에 달라붙음

중요한 버튼이나 컨트롤이 있는 페이지 상단 가까이에 div가 배치되어 있다고 상상해 보세요. 사용자가 수직으로 스크롤할 때 이 div가 사용자를 따라가며 화면 상단에 달라붙기를 원합니다. 맨 위로 돌아가면 원래 위치를 다시 시작해야 합니다.

해결책

이 동작을 달성하는 핵심은 사용자가 뷰포트를 스크롤한 후에만 div를 "고정"으로 만드는 것입니다. 여기에는 CSS 위치를 고정으로 설정하는 작업이 포함됩니다. 구현 방법은 다음과 같습니다.

<code class="javascript">// Cache jQuery objects for efficiency.
const $window = $(window);
const $stickyEl = $('#the-sticky-div');
const elTop = $stickyEl.offset().top;

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

이 코드는 창의 스크롤 이벤트에 이벤트 핸들러를 연결합니다. 트리거되면 현재 스크롤 위치가 elTop(상단으로부터 div의 초기 오프셋)을 초과했는지 확인합니다. true인 경우에는 끈적끈적이라는 CSS 클래스를 div에 추가하여 화면 상단에 고정되도록 합니다. 그렇지 않으면 클래스가 제거되어 div가 원래 위치로 돌아갈 수 있습니다.

해당 CSS 클래스 정의는 다음과 같습니다.

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

위 내용은 스크롤 시 Div를 고정시키는 방법: 고정 위치 지정 및 이벤트 처리에 대한 가이드?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!