サイドバーをスクロールに合わせてついてくるようにできるjQueryプラグイン-Contained Sticky Scroll

サイドバー等のボックスを下にスクロールしても一緒についてスクロールするようにできるjQueryのプラグインです。右上のアイコンをクリックで一緒にスクロールするのをやめる事もできます。
設置も簡単にでき、IE6にも対応しています。

jQueryプラグイン-Contained Sticky Scroll

配布先とデモページ

配布先:Contained Sticky Scroll

サイトの真ん中くらいにある下の画像の箇所をクリックでダウンロードできます。ダウンロードファイルの中にデモやjQueryのファイル等一式入っています。
jQueryプラグイン-Contained Sticky Scroll

デモ:Contained Sticky Scroll Demo

使い方

ヘッダー内に下記を記入してjQuery本体とプラグインを読み込みます。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-contained-sticky-scroll.js"></script>

続けてヘッダー内に下記を記入します。’#side’の部分はついてくる要素を指定します。

<script type="text/javascript">
		jQuery(document).ready(function(){
			jQuery('#side').containedStickyScroll();
		});
</script>

オプション

下記のオプションを指定できます。

• easing
アニメーションのタイプを指定。linearがデフォルト  

• duration
サイドバーが降りてくるスピードを指定。デフォルトは500(数字が小さい方が早い)

• queue
trueかfalseを指定。デフォルトはfalse。trueを指定するとアニメーションがついてくるのが遅くなる?

• unstick 
trueを指定でついてくるのをオフする機能を付ける。falseを指定でオフ機能を付けない。デフォルトはtrue(オン)

• closeChar
ついてくるのをオフするアイコンを指定した文字列に変更。デフォルトは^

• closeTop
ついてくるのをオフするアイコンのトップからの位置をピクセルで指定。デフォルトは0

• closeRight  
ついてくるのをオフするアイコンの右からの位置をピクセルで指定。デフォルトは0

使ってみたdemo

使ってみたdemoです。

オプションを指定して、付いてくるアニメーションのスピードを早くして、付いてくるのをやめるアイコンを×にしました。
※”closeTop”を指定してもアイコンの位置は変わらなかったです。”closeChar”で位置を指定するとトップと右からの位置に変更されました。

使ってみたdemoのヘッド内のコードです。

<script type="text/javascript" src="jquery-1.7.min.js"></script>
<script type="text/javascript" src="jquery-contained-sticky-scroll.js"></script>
		<script type="text/javascript">
		jQuery(document).ready(function(){
			jQuery('#side').containedStickyScroll({
			duration:300,
			closeTop:10,
			closeChar:'×'
			});
		});
		</script>

Related Article

No Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー jQueryプラグイン スライドショー トラブル コードサンプル 素材 コンテンツ Facebook php 引っ越し お知らせ JavaScript カテゴリー Shareボタン CSS IE 投稿タイプ レスポンシブ Photoshop seo Macアプリ サイドバー タクソノミー HTML5 WPセキュリティ Git カスタムメニュー ナビゲーション PHPリファレンス SVG API query_posts RSS WP使い方 iTunes データベース コメント function 条件分岐 get_posts() スマートフォン Sass/Compass moreタグ