【アップデートしました】画面の右下に常にくっついてくる要素を作るプラグイン

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

floatingNavi/floating.js at master · Shizumi/floatingNavi

画面の右下に常にくっついてくる要素を作るプラグイン. Contribute to Shizumi/floatingNavi development by creating an account on GitHub.

github.com

サンプル

使い方はGithubをご確認ください。

アップデートを行い、jQueryの3系に対応しましたが、CSSの追加などが必要になっていますので注意してください。

指定プロパティ

指定するプロパティは以下の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
	}
} );