[JS]スクロールしてもサイドバーなどの要素を貼り付けたように常に表示させるシンプル高性能超軽量スクリプト -Sticky-kit
Post on:2013年8月8日
sponsors
ユーザーがスクロールした際、指定した要素をぴたっと貼り付けたように指定範囲に常に表示させるスティッキー用のjQueryのプラグインを紹介します。
実装は非常に工夫されており、シンプルかつ高性能、しかも1.8kの超軽量！
一行の記述で、複数の要素を異なる範囲に表示させることもできます。
Sticky-kitのデモ
デモはさまざまなタイプのスティッキーが楽しめます。
最新のモダンブラウザでご覧ください、IEは7+で。
よく見かけるサイドバーがぴたっと貼りつくタイプをはじめ、複数の要素をそれぞれ異なる範囲でぺたっと貼り付けることもできます。
複数の要素を異なる範囲にも貼り付けたデモ
Sticky-kitの使い方
実装は非常にシンプルで、簡単です。
Step 1: 外部ファイル
head内にjquery.jsと当スクリプトを外部ファイルとして記述します。
<head> ... <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script type="text/javascript" src="/jquery.sticky-kit.js"></script> </head>
Step 2: HTML
HTMLはぺたっと貼り付ける要素と範囲を指定できるようidなどを付与しておきます。
<div id="sticky_item">貼り付ける要素</div>
Step 3: JavaScript
jQueryのセレクタで貼り付ける要素を指定し、スクリプトを実行します。
移動範囲はデフォルトで親要素になっており、「stick_in_parent()」で移動範囲を指定することもできます。
<script type="text/javascript">
(function() {
$("#sticky_item").stick_in_parent();
})();
</script>
前述の複数の要素を異なる範囲にするのも簡単です。
貼り付ける要素にclassを付与するだけで、それぞれが親要素の範囲のみ移動します。
<script type="text/javascript">
(function() {
$(".sticky_item").stick_in_parent();
})();
</script>
classでなく、idを付与した要素を複数対応させることもできます。
<script type="text/javascript">
(function() {
$("#sidebar, #main_column").stick_in_parent();
})();
</script>
sponsors
