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

화면 상단에 고정되는 Div 만들기

문제:

처음에는 콘텐츠 블록 아래에 남아 있는 div를 만들려고 합니다. 그러나 페이지를 아래로 스크롤하여 div의 상단 경계에 도달하면 고정되어 페이지와 함께 스크롤됩니다.

해결 방법:

고정 위치 지정 속성이 있는 CSS 사용 원하는 것을 달성한다 기능:

.fixedElement {
    background-color: #c0c0c0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}

편집:

div가 고정된 상태로 유지되도록 하려면 처음에 절대 위치 지정이 있어야 합니다. 요소의 스크롤 오프셋에 도달하면 위치 지정이 고정으로 변경되고 상단 위치는 0으로 설정됩니다.

scrollTop 함수를 사용하여 문서의 상단 스크롤 오프셋을 감지합니다.

$(window).scroll(function(e) {
    var $el = $('.fixedElement');
    var isPositionFixed = ($el.css('position') == 'fixed');
    if ($(this).scrollTop() > 200 && !isPositionFixed) {
        $el.css({'position': 'fixed', 'top': '0px'});
    }
    if ($(this).scrollTop() < 200 && isPositionFixed) {
        $el.css({'position': 'static', 'top': '0px'});
    }
});

스크롤할 때 오프셋이 200에 도달하면 요소가 고정되어 브라우저 창 상단에 고정됩니다.

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