jQuery を使ってサイドバーのスクロールを止めてみる

公開日| 2012年11月5日   更新日| 2012年11月5日   コメントはありません。

今回は、jQuery を使ってサイドバー(このサイトでは、右側の情報)のスクロールを止めてみたいと思います。

よく使われいるのは、ページのサイドバーの広告表示をある位置でスクロールを停止して、それ以上上にスクロールしないようにするものです。

これは、jQuery を使うと案外簡単です。
では、早速、簡単に解説してみます。

このページのサイドバー(右側)をスクロールしないようにしてみる

簡単な例として、jQuery を使って、このページのサイドバー(右側)をスクロールしないようにしてみます。


  1. スクロールしたくないサイドバー(右側)にタグIDを振っておく

    まず、jQuery でスクロールしたくないタグを特定するためのIDを指定しておきます。
    ここでは、Wordpressを使っていますから、特に簡単で、テンプレートのサイドバーを編集している sidebar.php (テンプレートによってファイル名は異なります) を編集するだけです。

    <div id="r_sidebar">
    <div id="sidebar_scroll">
    ...
    </div>
    </div>
     

    このサイトでは、サイドバー全体を id=”r_sidebar” で括っていますから、その直下に id=sidebar_scrollを使ってサイドバー(右側)全体を括ってみます。
    つまり、サイドバー(右側)全体をスクロールさせないようにしてみます。


  2. jQuery である一定の位置までスクロールしたら、サイドバー(右側)をスクロールしないようにする

    次は、jQuery を使ってサイドバー(右側)をスクロールしないように制御してみます。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    
    <script type="text/javascript">
    /* <![CDATA[ */
    jQuery(function($) {
    	var sidebar = $('#sidebar_scroll');
    	var offset  = sidebar.offset();
    	$(window).scroll(function () {
    		if($(window).scrollTop() > offset.top - 20) {
    			sidebar.css('position', 'fixed');
    			sidebar.css('top', '20px');
    			sidebar.css('width', '200px');
    		} else {
    			sidebar.css('position', 'static');
    		}
    	});
    });
    /* ]]> */
    </script> 
     

    4行目: サイドバー(id=sidebar_scroll)タグを捕まえています。

    5行目: サイドバーのスクロール位置を取得しています。

    6行目: ウィンドのスクロールイベントが発生したら、以降の処理を実施します。

    7行目: ウィンドのスクロールのスクロール位置(上)が、サイドバー(id=sidebar_scroll)の位置(上)の20ピクセル下回ったら、以下の処理を実施します。

    8行目: サイドバー(id=sidebar_scroll)のstyle を posistion = fixed (固定:スクロールしない)へ設定します。

    9行目: サイドバー(id=sidebar_scroll)のstyle を top = 20px へ設定します。

    10行目: サイドバー(id=sidebar_scroll)のstyle を width = 200px へ設定します。

    12行目: サイドバー(id=sidebar_scroll)のstyle を posistion = static (固定しない:スクロールする)へ設定します。

    これで終わりです。
    どうです?止まってますか?

簡単でしょ?

これは、CSSファイルを使うともっと簡単に書くことができます。

CSSファイルに以下のようなクラスを追加してあげて、
...
.fixed_sidebar {
	position: fixed;
	top: 20px;
	width: 315px;
}
Javascriptは、このクラスを追加、削除するだけで同じような動作を得ることができます。
<script type="text/javascript">
/* <![CDATA[ */
jQuery(function($) {
	var sidebar = $('#sidebar_scroll');
	var offset  = sidebar.offset();
	$(window).scroll(function () {
		if($(window).scrollTop() > offset.top - 20) {
			sidebar.addClass('fixed_sidebar');
		} else {
			sidebar.removeClass('fixed_sidebar');
		}
	});
});
/* ]]> */
</script> 
これでもっと簡単になりましたね。止める位置もここでは20としていますが、もっと下でも調整できます。

いろいと試して自分の心地よい位置にサイドバーを止めてみましょう。


コメント

口コミ・評判を投稿 :

ブラウザの JavaScriptが無効となっている場合、コメントの投稿はできません。
コメントを投稿するには、JavaScriptを有効にしてください

お名前 *

メールアドレス *
(口コミ・評判欄には、表示されませんが入力が必要です。)

サイトアドレス



  • はてなブックマークへ追加する
  • Facebookでシェアする
  • twitter でつぶやく
  • Google Plusでシェアする
  • Pocketでシェアする
ページトップへ