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

세로 스크롤 시 화면 상단의 Position Div

질문:

어떻게 만들 수 있나요? 사용자가 스크롤하여 웹페이지를 지나갈 때 div가 웹페이지 상단에 "고정"됩니까? 페이지 상단으로 돌아간 후 div를 원래 위치로 복원하고 싶습니다.

해결 방법:

이 기능의 핵심은 위치를 설정하는 것입니다. div는 사용자가 스크롤한 후에만 가능합니다. 이를 달성하기 위해 window.scroll 이벤트에 연결된 핸들러를 사용할 수 있습니다.

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

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

이 코드는 페이지가 스크롤할 때 div에 고정 CSS 클래스를 추가하고 페이지가 돌아올 때 클래스를 제거합니다. 맨 위로. CSS 클래스는 다음과 같이 정의됩니다.

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

고정 클래스가 추가되면 div는 고정된 위치를 가정하고 화면 상단에 유지됩니다. 클래스가 제거되면 원래 위치로 돌아갑니다.

참고: 성능 향상을 위해 jQuery 객체를 캐시하도록 코드가 최적화되었습니다.

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