特定の要素に吸着させるjQueryプラグイン


ページをスクロールしている時に、特定のdivの冒頭にぴたっと吸着(スナップ)させたい。というような時に使えるjQueryプラグインがScrollSnap(リンク先で動作を確認できます)です。

使い方としては、ヘッダでjQuery本体とScrollSnapを読み込み、スナップさせたい要素をsnaps:のところで指定します

<script src="demo/foundation/javascripts/jquery.js"></script>
<script src="src/jquery.event.special.js"></script>
<script src="src/jquery.easing.min.js"></script>
<script src="src/jquery.scrollsnap.js"></script>
<script>// <![CDATA[
 $(document).ready(function() {
 $(document).scrollsnap({
 snaps: '.snap',
 proximity: 50
 });
});
// ]]></script>

上のコードの場合、.snap クラスの要素に近づくとスナップします。

また、proximityの値が、スナップが発動するための閾値になります。
大きい値にすると、要素から離れていても吸着するようになります。

atnr.net の RSS登録はこちらから

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です