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

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

Sticky-Kit

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

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

AD

Javascript

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

Sticky-Kitの将来性について

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

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

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

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

AD

Share

Commentsコメント

メールアドレスは公開されません。コメントは必ずご入力ください。

HTMLタグは使用できません。ソースコードを書き込みたい場合はCodetterGistCodePenなどのご利用が便利です。

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