ウィンドウ幅をjQueryで取得して動作を制御する覚書

Tweet

238

このサイトをレスポンシブ化したときに、画面幅が狭まった時にサイドバーを下に持っていき、レイアウトを変更したらSticky-Kitで指定したままだった箇所でスクロールが上手くできなくなってしまったので、その時にやった対処の覚書です

ウィンドウ幅によってSticky-Kitを有効・無効にする

レスポンシブ化してサイドバーがコンテンツの下に来て、親要素との関係で上手く動かなくなったのだと思います。なので、レスポンシブ化して付いてくるようにする必要が無くなったのでCSSでのmediaqueryのブレークポイントに合わせて、指定を解除して無効化することにしました

方法はjQueryを使って、現在のウィンドウ幅を取得して
その数値によってSticky-Kitを有効にするかどうかを if文で行う

jQuery(function(){
        var w = jQuery(window).width();
        var x = 481;
        if (w >= x) {
        jQuery(".sticky").stick_in_parent({parent:'.main'});
        }
});

解説

まずは var w に現在のウィンドウ幅を取得し格納します
jQuery（windows）.width（）;で現在のウィンドウ幅を取得出来ます

var x にはブレークポイントの幅を入れます

次に if文で w は x 以上の場合のみ {}内を実行
{}内にはSticky-Kitを実行するコード入れておく

これで画面幅が481px以上の時だけSticky-Kitで要素が付いてくるようになります。

jQueryの部分を$にせずにそのまま書いているのはWordPressの内臓のjQueryでも動くようにするためです。
独自にjQueryのライブラリを読み込んでいる場合は、jQueryの部分を$に置き換えれます

今回はウィンドウ幅によってSticky-Kitの動きを制御しましたが
Sticky-Kit以外にもウィンドウによって結果を変化させるのに応用が効きます

さらにelseを使えば、多分岐にすることも可能。

Tweet

短縮URL:

2013年11月23日 WEB制作系 jQuery