초기 위치에도 불구하고 div를 스크롤한 후 고정된 상태로 유지하려면 어떻게 해야 합니까?

스크롤한 후 Div 수정

문제: 스크롤한 후에도 div가 고정된 상태로 유지되도록 하려면 어떻게 해야 합니까? 그것에 대한 초기 입장에도 불구하고 페이지?

해결책:

이를 달성하려면 두 가지 기본 접근 방식이 있습니다.

1. CSS 전용 방법:

   • CSS 활용 position: 원하는 위치로 스크롤한 후 고정 속성.
   • 이 솔루션은 최신 브라우저에서 사용할 수 있습니다(자세한 내용은 https://stackoverflow.com/a/53832799/1482443 참조).

2. jQuery 방법:

   • jQuery를 사용하여 스크롤 이벤트를 수신합니다.
   • offset().top 메서드를 사용하여 원하는 div의 초기 위치를 결정합니다.
   • 적용 position: 스크롤 위치가 div의 초기 위치를 초과하는 경우 스타일을 고정하고 그렇지 않으면 position: static으로 되돌립니다. jQuery 코드는 다음과 같습니다.

var fixmeTop = $('.fixme').offset().top;

$(window).scroll(function() {

    var currentScroll = $(window).scrollTop();

    if (currentScroll >= fixmeTop) {
        $('.fixme').css({
            position: 'fixed',
            top: '0',
            left: '0'
        });
    } else {
        $('.fixme').css({
            position: 'static'
        });
    }

});

어느 접근 방식을 사용하든 스크롤한 후 효과적으로 div를 수정할 수 있습니다. 두 가지 방법 중 하나를 선택할 때 브라우저 지원을 고려하십시오.

위 내용은 초기 위치에도 불구하고 div를 스크롤한 후 고정된 상태로 유지하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!