• かちびと.net

    スクロールした位置に付いてくるサイドバーを実装するjQueryプラグイン・Contained Sticky Scrollのご紹介。汎用的で使いやすく、クロスブラウザ対応です。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

スクロールした位置に付いてくるサイドバーを実装するjQueryプラグイン・Contained Sticky Scroll

スポンサーリンク

気になったので備忘録。スクロール
した位置に付いてくるサイドバーを
実装してくれるjQueryプラグイン・
Contained Sticky Scrollです。細
かいオプションも設定できて、IE6や
IE7でも動作してくれるので覚えて
おこうと思って記事にします。

Web Designer Wallがリニューアルしてサイドバーを固定していました。これはcssで実装してるみたいですが、IE6利用率が10%を超える日本では、まだ捨てるわけにもいかないのが現状ですね。(個人的には徐々に捨て始めてますがw)

Contained Sticky Scroll


基本的にはアニメーションで付いてきますが、ノンアニメーションも可能です。

使い方

いつもどおりjQueryとプラグインのパスを書きます。

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

続いて設定。

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

WordPressフレンドリーにしてくれたようです。上記記述例は#sidebarが付いてくる要素と仮定したものです。オプションにも対応していますよ。

Demo1


デフォルトの状態です。右端のアイコンをクリックすると付いてこなくなります。

Demo1

コード

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

Demo2


アイコンの形を変えて、スピードも早くしました。

Demo2

コード

		<script type="text/javascript">
		jQuery(document).ready(function(){
			jQuery('#sidebar').containedStickyScroll({
        duration: 150,
        closeChar: 'x'
    });
		});
		</script>

Demo3


スピードを0にすればアニメーションしませんがIE6と7で動作しなくなります。あと、チカチカします。

Demo3

コード

		<script type="text/javascript">
		jQuery(document).ready(function(){
			jQuery('#sidebar').containedStickyScroll({
        duration: 0,
    });
		});
		</script>


iPhoneでも付いてきてくれる。

使い方次第でユーザビリティにもなるし、ウザい仕様にもなりますので注意が必要ですが、簡単に設置できるので使い勝手も良さそうです。覚えておいて損は無いですね。

Contained Sticky Scroll jQuery Plugin

URL :
TRB :

Ads

Posts

Contact

Services