scrolllayer.js（ウィンドウスクロールに合わせて動くレイヤー）

2007年7月30日

■概要

scrolllayer.jsは、ウィンドウスクロールに合わせてレイヤーを移動し、
ウィンドウからはみ出さないようにするJavaScriptライブラリです。

scrolllayer.jsを使うことで、下記サンプルのように、
ウィンドウをスクロールしても上部メニューがついていくようにできます。

http://www.sonicjam.co.jp/soniclabs/sample/scrolllayer/sample1.html

その他、広告用のバナー、ブログパーツなどウィンドウ内に常に表示したい要素に
ご使用ください。

■ダウンロード

scrolllayer.js version1.0.1
http://www.sonicjam.co.jp/soniclabs/download/scrolllayer-1.0.1.zip

■利用規約

本プログラムはMITライセンスに基づいて配布しております。

・本プログラムを使用することによって被った不利益もしくは損失について当社は一切責任を負いません。
・本プログラムのソース内冒頭部分にあるプログラム名、バージョン及び著作権表示を変更することはできません。

■使い方

(1) JavaScriptライブラリをインクルードします。

PLAIN TEXT
HTML:
  1. <script language="javascript" xsrc="js/prototype.js" type="text/javascript"></script>
  2.  
  3. <script language="javascript" xsrc="js/scriptaculous.js?load=effects" type="text/javascript"></script>
  4.  
  5. <script language="javascript" xsrc="js/layercommon.js" type="text/javascript"></script>
  6.  
  7. <script language="javascript" xsrc="js/scrolllayer.js" type="text/javascript"></script>

(2) ウィンドウスクロールに合わせて移動させたいレイヤーに、class=”scrolllayer” 属性を追加します。

PLAIN TEXT
HTML:
  1. <div class="scrolllayer">このレイヤーはウィンドウスクロールに合わせて移動します</div>

■補足

class=”scrolllayer”属性を追加したレイヤーは、レイヤーがウィンドウからはみ出した時点から ウィンドウスクロールに合わせて移動を開始します。

レイヤーをウィンドウの固定位置に常に表示させたい場合は、レイヤーに、class=”scrolllayerfixed” 属性を追加します。

PLAIN TEXT
HTML:
  1. <div class="scrolllayerfixed">このレイヤーはウィンドウの固定の位置に常に表示されます</div>

class=”scrolllayer”属性を追加した場合と、class=”scrolllayerfixed”属性を追加した場合の 動きの違いは下記サンプルをご覧ください。

http://www.sonicjam.co.jp/soniclabs/sample/scrolllayer/sample3.html

Share|
投稿者:
arahan