스크롤할 때 Div 스틱을 화면 상단에 표시하는 방법은 무엇입니까?

Div를 화면 상단에 고정

원하는 효과를 얻으려면 div를 다른 콘텐츠 아래에 배치하고 초기 위치를 설정하세요. 절대 또는 상대. div의 상단 가장자리가 뷰포트와 정렬될 만큼 페이지가 스크롤되면 위치를 고정으로 수정하고 상단 값을 0으로 재설정합니다.

CSS:

.sticky-div {
    position: absolute;
    top: initial;
    width: 100%;
}

.sticky-div.fixed {
    position: fixed;
    top: 0;
}

JavaScript(jQuery):

$(window).scroll(function() {
    var div = $('.sticky-div'),
        scrollTop = $(this).scrollTop();

    if (scrollTop > 200) {
        div.addClass('fixed');
    } else {
        div.removeClass('fixed');
    }
});

scrollTop이 200을 초과하면 div가 고정되어 뷰포트와 함께 스크롤됩니다. 다시 위로 스크롤하면 고정 클래스가 제거되어 원래 위치로 복원됩니다.

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