スクロールすると指定したエレメントが付いてきます
この手のスクリプトは巷にたくさんあるのですが、
メニュー等が縦長の場合、下部が見えるよう調整したスクリプトがなかったので自作しました。
jQuery等のライブラリは必要なく単独で動きます。
使用にあたっての注意
- 再配布はご遠慮くださいませ
- 改変は自由にしてくださって構いませんが、最上部にあるコメント部分は削除しないでください。
- このスクリプトを使用し、何らかの問題が発生しても一切責任は負いません。
- 使用に関しては自己責任でお願いいたします。
- ご要望、バグなどございましたらお問合せフォームまで
設置方法1
head要素内にfollowscrolling.jsを読み込みます。
<script type="text/javascript" src="followscrolling.js"></script>
設置方法2
下記を適当な場所へ記述してください。
※設定は「設定可能オプション」をご覧ください。
var followscrolling = new ATFollowScrolling({
element : '#menu'
});
followscrolling.load();
設定可能オプション
element : ‘#menu’
スクロールさせたいID名を指定します。
parent : ‘contents’
親要素のID名を指定します。
指定した場合は指定したエレメント範囲内でスクロールします。
指定しない場合は上記で指定したelementの親要素となります。
duration : 500
アニメーションの時間の長さです。
（初期値は500、500の場合この記述は必要ありません）
delay : 0
付いてくるまでの遅延時間です。
（初期値は0、0の場合この記述は必要ありません）
interval : 10
アニメーションが動作する一定間隔の時間です。
（初期値は10、10の場合この記述は必要ありません）
animation : ‘quinticOut’
アニメーションの種類が設定可能です。
liner、quinticOut、quinticInの3種類の動きが可能です。
アニメーションを無効にするにはfalseを指定してください。
（初期値はquinticOut、quinticOutの場合この記述は必要ありません）
offset : 0
スクロールさせたいエレメントの上のマージンです。
（初期値は0、0の場合この記述は必要ありません）
long: true
ウインドウの高さより指定したエレメントが縦が長い場合、上下が見えるようにするにはtrueを設定してください。
（初期値はtrue、trueの場合この記述は必要ありません）
