Bootstrap3のAffixとScrollspyを試してみた


就職してもうすぐ3年になりますが、初めて病欠しました。17日の木曜日から熱と下痢でダウンしており、丸々二日パソコンさえ触らないという状況でした。

それはともかく、Bootstrapの公式サイトにもあるサイドバーのメニュー。
affix

スクロールして一番上まで来たら追従するようになり、さらにヘッダーまでくるとその位置でストップするような動きになっています。そして、そのメニューはメインの内容に対応して現在の位置がどこか示してくれます。前者はAffix、後者はScrollSpyという方法を使うと実装できるようです。

というわけで作ってみたのそのメモ。

HTML

CSS

JavaScript

3~19行目がAffixの記述(といっても、console.logをやっているだけのところは必要ないですが)、21行目がScrollSpyの記述です。

実行サンプル:Bootstrap3のAffixとScrollspyを試してみた
ブラウザの高さを狭くして、一番下までスクロールしたらフッターの上でメニューの位置がストップするのがわかると思います(とはいっても、Chromeでしか動作確認してないのですが・・・)。

以下、作成する際に手こずったこと。

はじめ、スクロールを一番下までやった後にスクロールを上に戻すと、なぜかフッターの直前でメニューがストップしたままになってしまっていました(一番上までやるともとに戻る)。とりあえず、Affixにはいろいろイベントが用意されているようなので、affix.bs.affix(affixが発生する直前に発生)、affixed.bs.affix(affixが発生した直後に発生)、affix-bottom.bs.affix(affixが最下部に到達した時に発生)、affixed-bottom.bs.affix(affixが最下部に到達した直後に発生)というイベントを呼ぶとそれぞれのイベント名をコンソールに吐き出すようにしてみることに。すると、一番下までスクロールした時に『affix-bottom.bs.affix』『affixed-bottom.bs.affix』という順番に呼ばれた後、もう一度上にスクロールすると『affix.bs.affix』『affixed.bs.affix』が呼ばれるのだけれども、またそのすぐ後に『affix-bottom.bs.affix』『affixed-bottom.bs.affix』が呼ばれているのを確認。この中間の『affix.bs.affix』『affixed.bs.affix』が呼ばれた時点でのメニューの属性を確認してみるとstyleのtopがaffix-bottomの時のままになっていました。いろいろ調べて原因が分からなかったのでとりあえず『affix.bs.affix』が呼ばれた時点でtopを0にするようにしています(上記JavaScriptのコードの10行目)。でも、こんなことやってるところなさそうなので、やっぱり自分の何かが間違っているのだと思います。

ちなみに、『affix.bs.affix』とかのイベントは古いBootstrap3のバージョンでは動いてくれませんでした。今回のサンプルは現在最新のバージョン3.1.1で試しています。後、CSSの指定も意外と重要っぽいです。クラスがaffix-topの時の指定、クラスがaffixの時の指定、クラスがaffix-bottomの時の指定はちゃんと書いたほうがよさそうでした(上記CSSのコードの16行目から25行目)。

ScrollSpyのほうは、たいして手こずることはなかったのですが、1つ手こずったのがメニューのクラスに”nav”をつけなければいけないということに最初気づかず、迷いました。なんでnavクラスだけにしてるんだろう・・・。

余談ですが、Affixの機能は一般的にスティッキーサイドバーと呼ばれています。予想できるかもしれませんが、メニューではなくヘッダー追従型だと、スティッキーヘッダーという名前になります。ScrollSpyもBootstrap独自の名前っぽいので、一般的な呼び名というのがあるのかもしれません。

Twitter Bootstrap3のレスポンシブ対応について調べてみた


趣味で運営しているサイト(現在は、レスポンシブ対応をせずにTwitter Bootstrap2を利用している)をレスポンシブ対応したいと思い、Twitter Bootstrap3のレスポンシブ箇所について調べてみた。

カラムについて

おおまかに4種類のサイズに分かれるらしく、

  • モバイルサイズ:768px未満
  • タブレットサイズ:768px以上、991px以下
  • デスクトップサイズ:992px以上、1199px以下
  • 大画面サイズ:1200px以上

という具合で考えたらいいらしい。

それぞれモバイルサイズが『xs』、タブレットサイズが『sm』、デスクトップサイズが『md』、大画面サイズが『lg』という文字であらわすらしく、例えばカラムの指定は『col-○○-*』であらわし、タブレットサイズの2カラムならば『col-sm-2』と書くよう(カラムについては、特定のサイズ以上という認識のほうがよさそう)。なお、*部分の数値は1~12まで指定可能。
オフセットも同様に『col-○○-offset-*』というように記述。この記述をすると、左側に空白ができる(margin-leftの指定用)。オフセットの場合は0~12の数値が指定できるらしい。0(margin-left:0)と12(margin-left:100%)の使い道がいまいちよく分からないのだけど。

カラムの順番変更

『col-○○-push-*』や『col-○○-pull-*』といったクラスを使うことによって順序が変更可能。
タブレットサイズとデスクトップサイズで順番が変わるようなサンプルを書こうと思い”col-xs-6 col-sm-pull-6 col-md-push-6″というクラスをもったdivタグを作ると、予想外の動作になってしまった。慣れるのにちょっと時間がかかりそう。これも数値の指定は0~12。

それぞれのサイズでの表示・非表示設定

『visible-○○』で指定のサイズのみ表示、『hidden-○○』で指定のサイズのみ非表示ということができるよう。

レスポンシブウェブデザイン対応での基本は上記のようになりそう。雑だけどサンプルは以下。
Twitter Bootstrap3の勉強

他にもBootstrapには便利そうな部品などがいろいろあるのでもうちょっと勉強していきたい。