【Javascript】Sticky-Kitをレスポンシブに対応させる | Wood-Roots:blog

2018
02/07

Sticky-Kitをレスポンシブに対応させる

Sticky-Kitはスクロールに追従するナビゲーションやサイドバーを簡単に実装できるjQueryプラグインです。

Sticky-Kit

簡単に設置できるのでよく使うのですが、デフォルトで設置するだけだとレスポンシブに対応しなかったので狭いウインドウでは機能を無効にする処理を考えました。

DEMO
※ウインドウサイズを変更しながら確認してください。

ADs

Javascript

指定ウインドウサイズ以下のときはSticky-kitの機能を無効化し、以上のときは再度有効にする書き方です。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$(function(){
//480pxがブレークポイントの場合
var bp = 480;
//Stickyを有効にする
var sticky_enable = function(){
$('nav').stick_in_parent();
$('#side').stick_in_parent({
offset_top: $('nav').outerHeight()
});
}
 
//Stickyを無効にする
var sticky_disable = function(){
$('nav,#side').trigger('sticky_kit:detach');
}
//ウインドウサイズによって有効・無効の関数を実行
$(window).on('load resize',function(){
var w = $(window).width();
if(w < bp){
sticky_disable();
} else {
sticky_enable();
}
});
});

Sticky-Kitの将来性について

Sticky-Kitは現時点ではよく使っているものの、

・親要素がdisplay:flexの場合、追従しない
・JSでやらずにposition: stickyを使うべきでは

という問題があるので今後は利用頻度が下がっていきそうです。

flexboxに対応したプラグインを探すか、自前で書くか、position:stickyに対応しないIE11を捨てるか、を検討したいと思います。

ADs

Related Articles関連記事

Post Comments

メールアドレスが公開されることはありません。

Comments

コメントはまだありません。

Category

Archive

Search

Social