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

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

대화형 웹 페이지를 개발하는 동안 사용자의 작업을 따르는 요소를 갖는 것이 바람직한 경우가 많습니다. 특히 특정 섹션에 도달할 때 스크롤합니다. 그러한 시나리오 중 하나는 페이지 상단 근처에 위치한 div와 관련되어 있지만 스크롤할 때 화면에 "붙어" 있어야 합니다.

해결책

이 효과를 얻으려면 창의적인 조합 JavaScript와 CSS를 사용합니다. position:fixed 스타일은 div에 적용되지만 사용자가 div를 스크롤한 후에만 적용됩니다.

이를 수행하는 방법은 다음과 같습니다.

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

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

이 JavaScript 코드는 div에 이벤트 핸들러를 추가합니다. 스크롤 위치를 모니터링하는 window.scroll 이벤트. 스크롤이 div(elTop)의 초기 위치를 초과하면 "고정" CSS 클래스가 추가됩니다. 이 클래스에는 다음과 같은 CSS 스타일이 포함되어 있습니다.

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

결과적으로 div는 고정된 위치를 가정하고 스크롤이 유지되는 한 페이지 상단에 유지됩니다. 사용자가 다시 위로 스크롤하면 고정 클래스가 제거되고 div가 원래 위치로 돌아갑니다.

이 솔루션은 JavaScript와 CSS의 강력한 기능을 결합하여 응답성이 뛰어나고 사용자 친화적인 환경을 만듭니다. 페이지의 스크롤 위치에 상관없이 중요한 요소를 쉽게 찾을 수 있습니다.

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