画面の右下に常にくっついてくる要素を作るプラグイン

ナビゲーションとか、ページアップのような要素をスクロールに合わせて画面に追従させるjQueryプラグインを作ってみました。
そこまではどこにでもあるのですが、それに加えてフッターなどの被らせたくない要素より下には追従してこない機能をつけました。

floating.js

サンプル

使い方はよくあるjQueryプラグインのように、追従させたい要素にfloatingメソッドを実行させるだけ。

指定プロパティ

指定するプロパティは以下の6つです。

object要素(要素名を指定。jQueryの要素指定の方法と同様の形式で。)

• bottomStandard : フッターなど被らせたくない物の要素名(.hoge)
• navi : 追従させたい要素(.fuga)
• main : メインコンテンツの横幅。このコンテンツの右側に設置される(.piyo)

pixles要素(単位:px)

• fadein : 追従させたい要素をどの高さから表示させるか。常に表示するときは0を指定。
• sideMargin : メインコンテンツからどれだけ横にずらすか。数字が増えると右にずれる。
• bottomMargin : 画面下部及び被らせたくないものからの距離。数字が増えると上にずれる。

サンプルサイトではこんなかんじで設定しています。

$( '.pageup' ).floating( {
	objects: {
		bottomStandard: '.footer',
		navi: '.pageup', 
		main: '.main'
	},
	pixels: {
		fadein: 10, 
		sideMargin: 10, 
		bottomMargin: 10
	}
} );