[解決済み】ウィンドウサイズ変更時のjQueryについて

質問

以下のようなJQueryのコードを持っています。

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

唯一の問題は、これはブラウザが最初にロードされたときにしか動作しないことです。 containerHeight ウィンドウサイズを変更したときにもチェックされるようにする必要があります。

何かアイデアはありますか？

解決方法は？

jQuery、javascript、cssを使用してリサイズイベントを処理する例を紹介します。

(リサイズ時にスタイライズするだけなら、CSSが最適です(メディアクエリ))

http://jsfiddle.net/CoryDanielson/LAF4G/

css

.footer 
{
    /* default styles applied first */
}

@media screen and (min-height: 820px) /* height >= 820 px */
{
    .footer {
        position: absolute;
        bottom: 3px;
        left: 0px;
        /* more styles */
    }
}

javascript

window.onresize = function() {
    if (window.innerHeight >= 820) { /* ... */ }
    if (window.innerWidth <= 1280) {  /* ... */ }
}

jQuery

$(window).on('resize', function(){
    var win = $(this); //this = window
    if (win.height() >= 820) { /* ... */ }
    if (win.width() >= 1280) { /* ... */ }
});

リサイズコードが頻繁に実行されないようにするにはどうしたらいいですか!

これは、リサイズをバインドしたときに最初に気づく問題です。ユーザーがブラウザのサイズを手動で変更するときに、リサイズコードが大量に呼び出されるため、かなり不愉快に感じることがあります。

リサイズコードが呼び出される頻度を制限するために デバウンス または スロットル メソッドを アンダースコア &です。 ロダッシュ のライブラリを使用します。

• debounce は、最後のリサイズイベントから X ミリ秒後にのみ、リサイズコードを実行します。これは、ユーザーがブラウザのサイズを変更した後に、一度だけリサイズコードを呼び出したい場合に理想的です。グラフやチャート、レイアウトを更新する際に、リサイズイベントごとに更新するのが面倒な場合に有効です。
• throttle は、リサイズコードをXミリ秒ごとにしか実行しません。これは、コードが呼び出される頻度を調整するものです。これはリサイズイベントではあまり使われませんが、意識しておくとよいでしょう。

underscoreやlodashがない場合は、自分で似たような解決策を実装することができます。 JavaScript/JQueryです。$(window).resize リサイズが完了した後、どのように起動しますか？