jQueryでウインドウのスクロールやリサイズが終わった時だけ処理する方法

• 2013/05/31
• 
  • JavaScript
  • jQuery

ツイート

専門学校の授業でやっている課題で学生作品にリンクする為のページを作りました。写真をベースにしたフルHD対応のページにしたかったけど、フルHDではないPCやタブレット、スマホでアクセスしてもメニューをクリックできるように、ウインドウサイズによりメニューの位置を変更するようにしました。

作ったのは↓このページ。

※サーバの契約が終わったのでリンクは外しました。

以前、スクロールの時にうまくいかないことがあったので、リサイズが終わった時だけ処理するようにしたいと思い今回は粘って検索したら次のページを発見しました。

[jQuery] ウインドウのリサイズ操作が終わった時にだけ処理を実行する

var timer = false;
$(window).resize(function() {
    if (timer !== false) {
        clearTimeout(timer);
    }
    timer = setTimeout(function() {
    console.log('resized');
    // 何らかの処理
    }, 200);
});

上のページにも いろんな所でつかえるパターンだと思います。 と書かれていますが、スクロールも終了時に処理したいということがあるので、これがそのまま使えます。

リサイズがうまくいったので、このブログもページの下までスクロールしたらロゴを表示するようにしてみました。