ブログ

レスポンシブ・タイプセッティング対応、
スクロール時に指定位置で要素を固定させる
jQuery/Zeptoのコードを書いてみた

レスポンシブ・タイプセッティング(ウインドウサイズによって文字サイズを変化させる手法)に対応した、スクロール時に指定位置で要素を固定させるjQuery/Zeptoのコードを書いてくれというオーダーがあったので、rem対応、スクロール時に指定位置で要素を固定させるjQuery/Zeptoのコードを書いてみました。

スクロール時に指定位置で要素を固定させるJavaScript

スクロール時に指定位置で要素を固定させるJavaScriptは、ちょっと調べたらいくらでも出てきます。

ついでに、CSS3の「position:sticky」という、同等のことをやれるものも、徐々にブラウザで実装されはじめています。なのでいずれはこの手のスクリプトは不要になるかと思われます。しかし、CSS3の「position:sticky」は、ブラウザに実装されるのはもう少し時間がかかると思われます。

remとは?

remは、「root rem」、すなわちHTML要素のフォントサイズをベースにした単位です。

「rem」は プロパティではなく単位になります。単位表示でおなじみの「em:エム」に似ていますが「em」の様に親要素の値に影響を受ける事はありません。

CSS3 「rem」って何だ。」より

HTML要素の文字サイズが、すなわち1remになります。
つまり、remベースでスクロール時に指定位置で要素を固定させるには、HTML要素の文字サイズを取得する必要があります。

remを使わなくとも、文字サイズを拡大したら、スクロールしたときに「指定位置を文字サイズベースにしたい」ときに利用することができます。

HTML要素の文字サイズを取得するスクリプト

HTML要素の文字サイズを取得するコードは、JSFiddleにあったコードをそのまま利用させていただきます。

「rem() * 6」の部分は、1rem(HTML要素)の6倍の値を代入するということです。すなわち、HTML要素のフォントサイズが16pxなら、16px×6=96px、12pxなら、12px×6=72pxを代入します。

このコードでは、レスポンシブタイプセッティングに対応しています。
すなわち、HTML要素の文字サイズの変化に会わせて自動的に「sticky」というクラスを付与することが可能です。

スクロール時に指定位置で要素を固定させるコードを修正する

次に、remベースにした、高さ取得のスクリプトです。一般的には次のようなソースで記載します。

少し修正して以下のようなコードにします。

コードまとめ

すべてまとめたコードはこちらです。クラス名はご自由に変更してくださいな。

このコードを利用することで、jQueryとZeptoで動作します。

コードまとめのおまけ

【追記】2014/06/08 記事を追記しました。

ページロード時にはこんな感じに書けばいいです。

まとめ

もともとのオーダーはjQueryだけだったけど、ついでにZeptoで動くように書いてみたら、Zeptoでちょっとだけ罠にはまったということもあったりして。

ゆめいろデザインへのお問い合わせやお見積もり依頼はこちらから。
お客さまのニーズにあった提案を行い、パートナーとして共に成長することを目指しています。