스크롤 시 Div 스틱을 화면 상단에 표시하려면 어떻게 해야 합니까?

스크롤하는 동안 화면 상단에 Div 고정 만들기

스크롤 후에도 화면 상단에 고정된 div 만들기 특정 스크롤 임계값은 CSS 또는 JavaScript를 사용하여 달성할 수 있습니다.

CSS 해결 방법

CSS를 사용하면 div의 상단 가장자리가 화면 상단에 도달하면 div를 고정 위치로 지정할 수 있습니다.

.fixed-div {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}

JavaScript 솔루션

JavaScript를 사용하면 스크롤 위치가 특정 위치에 도달하면 div의 위치를 ​​동적으로 변경할 수 있습니다. 값:

$(window).scroll(function(e) {
    var $div = $('.fixed-div');
    var scrollTop = $(this).scrollTop();
    if (scrollTop > 200) {
        $div.css('position', 'fixed');
        $div.css('top', '0');
    } else {
        $div.css('position', 'static');
        $div.css('top', '0');
    }
});

이 스크립트에서는 jQuery scroll() 함수를 사용하여 스크롤 이벤트를 수신합니다. scrollTop 위치가 200을 초과하면 div에 고정 위치가 부여되고 페이지 상단으로 설정됩니다. scrollTop이 200 아래로 떨어지면 div는 다시 정적 위치로 되돌아갑니다.

위 내용은 스크롤 시 Div 스틱을 화면 상단에 표시하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!