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 中国語 Web サイトの他の関連記事を参照してください。