Horic Design

a-blog cmsやJavaScriptなどの情報を発信しています。

スクロール量に応じて要素を固定するjQueryプラグインを作った。

スクロール量に応じて要素を固定させるためのjQueryプラグインはいくつかあります。しかし、スクロールしたい要素の親要素や前の要素を指定したり、プラグインを有効にする条件を設定できるプラグインがなかったので今回自分でプラグインを作ってみました。
jquery.autoStick.jsです。

デモ

デモではスクロールするとキャラクターが親要素「.js-wrapper」内で固定されます。
また、ウィンドウサイズが768px以下だとキャラクターが固定されないように設定されています。
http://horicdesign.com/sample/autoStick

使い方(例)

$(".js-stick").autoStick({
	wrapperElement:".js-wrapper",
	beforeElement:".js-top",
	marginTop:20,
});

オプション

  • wrapperElementスクロール量を計測する親の要素
  • beforeElementスクロール量がbeforeElementの下限値とmarginTopを足した値を超えた所でfixedを開始する
  • marginTop親要素もしくはbeforeElementからの距離
  • marginBottom親要素の下限値からの距離
  • enableConditionこのプラグインを有効にする条件を指定

デフォルト値

var defaults = {
	wrapperElement:"body",
	beforeElement:null,
	marginTop:20,
	marginBottom:20,
	enableCondition:function(){
		return true;
	}
}

enableConditionの使い方

ウィンドウ幅が768px以下の時にプラグインを無効化したい場合、関数で返り値をfalseにしましょう。
有効にしたい場合はtrueです。

enableCondition:function(){
	if($(window).innerWidth() > 768){
		return true;
	}else{
		return false;
	}
}

githubで公開しています

是非使ってみてください。
https://github.com/steelydylan/jquery.autoStick.js


堀 悟大

有限会社アップルップル マークアップエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

エントリーリスト

カテゴリーリスト

タグクラウド