jQuery 또는 JavaScript를 사용하여 창 크기 조정에 반응하는 바닥글을 만들려면 어떻게 해야 합니까?

창 크기 조정용 jQuery

제공된 jQuery 코드는 페이지가 로드될 때만 창 높이를 확인합니다. 이 문제를 해결하려면 크기 조정 시 창 높이도 확인해야 합니다.

jQuery 사용

간단한 해결책은 다음을 사용하여 크기 조정 이벤트를 창 객체에 바인딩하는 것입니다. jQuery의 on() 메소드:

$(window).on('resize', function() {
    var $containerHeight = $(window).height();
    if ($containerHeight <= 818) {
        $('.footer').css({
            position: 'static',
            bottom: 'auto',
            left: 'auto'
        });
    } else if ($containerHeight > 819) {
        $('.footer').css({
            position: 'absolute',
            bottom: '3px',
            left: '0px'
        });
    }
});

JavaScript 및 CSS

또는 JavaScript와 CSS를 결합하여 크기 조정을 처리할 수 있습니다. 이벤트:

CSS:

.footer {
    position: static;
    bottom: auto;
    left: auto;
}

@media screen and (min-height: 820px) {
    .footer {
        position: absolute;
        bottom: 3px;
        left: 0px;
    }
}

JavaScript:

window.onresize = function() {
    if (window.innerHeight >= 820) {
        $('.footer').css({
            position: 'absolute',
            bottom: '3px',
            left: '0px'
        });
    } else if (window.innerHeight <= 818) {
        $('.footer').css({
            position: 'static',
            bottom: 'auto',
            left: 'auto'
        });
    }
}

성능 최적화

기본적으로 크기 조정은 이벤트가 자주 트리거되어 성능에 영향을 미칠 수 있습니다. 이를 완화하려면 디바운스 또는 스로틀 기능을 사용하여 코드 실행 빈도를 제한할 수 있습니다.

위 내용은 jQuery 또는 JavaScript를 사용하여 창 크기 조정에 반응하는 바닥글을 만들려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!