CSS / JavaScript / 備忘録 / 未分類

UIKitはとても便利なCSSフレームワーク。

HTMLタグ内にUIKitが準備しているクラスを付加すると、既に用意されているCSSが適応されて装飾してくれる優れもの。

また、レスポンシブ対応のため、ViewPointで切り替わるグリッドシステムも大変助かります。特にヘッダーあたりに用意するナビゲーション系が揃ってて、クラスの組み合わせで楽にナビゲーションバーが作成できるし、ハンバーガーメニューも取り組み安いので、クライアントからサイト構築をお願いされて複雑なものはUIKit頼みが多いですｗ

今回良く忘れがちなJSの設置を記録として残します。

例として、画面をスクロールするとコンテンツ途中に設置したアンカーメニューをブラウザ上部で止めるという機能。

よくある方法としては、jsでページが下へスクロールしているとき、任意のタグの位置がブラウザの上部と重なるフラグを基点として、position: fixedを適応する機能を用意したりします。

CSS3ではposition: stickyというものがありますが、この機能を付けることができるUIKitのクラスはuk-sticky。

画面上部から消えそうになるあたりで固定されるという機能のおかげで、いちいちメニューがある場所まで行く必要がなくなります。

クラスの追加方法は、アンカーリンクになっている親ブロックにuk-stickyを加えます。

 

<div uk-sticky>
<ul>
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
</ul>
</div>

 

今回このクラス付けを記録したかったのは、この動作の時に別の部分が悪影響を受け、構築したレイアウトが若干崩れる現象が起きました。

そのため、このstickyで上部に固定されたときに、JSで判定して、そのきっかけで崩れた部分を補うCSSを適用させるという作業が発生しました。

そのJSを記録します。以下のJSは、stickyにした先ほどのdivが画面上部で固定されたときに指定するセレクタにクラスを付加、外す動作するサンプルソースです。

 

// 固定された
UIkit.util.on('div', 'active', function () {
$(セレクタ).addClass(クラス名);
});

// 通常に戻った
UIkit.util.on('div', 'inactive', function () {
$(セレクタ).removeClass(クラス名);
});

 

こうすることで、stickyの動作によりJSが動いてくれます。

UIKitのクラス説明の中に、JS設定の説明があるものも存在します。

その中でEventという項目が準備されているものがあり、それらは上部のJSの書き方で利用出来るようです。

今回のuk-stickyには active と inactive の2種類が用意されていました。便利です。