[jQuery]画面をスクロールしたときにサイドバーの要素を追尾させる方法

Read More

jQueryを利用して、画面をスクロールしたときにサイドバーの要素を画面に追尾させるには以下の方法で実現させることができる。


まず元となるHTMLファイルを用意する。
そのHTMLのレイアウトを適当に組む。


■stalking.html: 雛形
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body style="text-align:center;margin:0;padding:0;">
<div style="background:purple;">header</div>
<div style="float:left;width:200px;height:1200px;background:red;">left</div>
<div style="float:right;width:200px;height:1200px;background:yellow;">right</div>
<div style="margin:0 200px;height:1200px;background:green;">center</div>
<div style="clear:both;background:blue;">footer</div>
</body>
</html>
# めんどくさいのでここではjQueryの読み込みにGoogle APIを利用する



この段階でページはこんな表示になる。
# 画像では見えないけど下にfooterも表示されている




次に、先ほどのHTMLファイルに追尾のためのスクリプトコードを追記する。
■stalking.html: サイドバー追尾(固定)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
  var offset = $("#stalking").offset();
  var topPadding = 15;
  $(window).scroll(function() {
    if($(window).scrollTop() > offset.top) {
      $("#stalking").stop().css({
        marginTop: $(window).scrollTop() - offset.top + topPadding
      });
    }else {
      $("#stalking").stop().css({
        marginTop: 0
      });
    };
  });
});
//-->
</script>
</head>
<body style="text-align:center;margin:0;padding:0;">
<div style="background:purple;">header</div>
<div style="float:left;width:200px;height:1200px;background:red;">left</div>
<div style="float:right;width:200px;height:1200px;background:yellow;">right<div id="stalking" style="background:white;margin:10px;">stalking</div></div>
<div style="margin:0 200px;height:1200px;background:green;">center</div>
<div style="clear:both;background:blue;">footer</div>
</body>
</html>


この段階でページはこんな表示になる。



■動作サンプル
http://xirasaya/demo/5/stalking.html



要素を追尾させるためにHTMLに埋め込んだのはヘッダー要素へjavascriptと、right位置へstalkingのIDを持つdiv要素の部分。
これだけ。

これでスクロールに合わせ画面にぴったり追尾するようになる。



追尾にアニメーション効果を入れたい場合は先ほどのjavascriptを以下のように一部変更すればアニメーションするようになる。

■stalking.html: サイドバー追尾(アニメーション)
- 略 -
<script type="text/javascript">
<!--
$(function() {
  var offset = $("#stalking").offset();
  var topPadding = 15;
  $(window).scroll(function() {
    if($(window).scrollTop() > offset.top) {
      $("#stalking").stop().animate({
        marginTop: $(window).scrollTop() - offset.top + topPadding
      });
    }else {
      $("#stalking").stop().animate({
        marginTop: 0
      });
    };
  });
});
//-->
</script>
- 略 -



■動作サンプル
http://xirasaya/demo/5/stalking.html



jQueryのオリジナルメソッドのcss()の部分をanimate()に変更しただけ。


またanimate()でも追尾を固定することはできる。
この場合animate()の第2引数のdurationの値を0とする。
duration値はアニメーションを実行する時間の長さで’fast’や'slow'なんて指定もできる。
# durationのデフォルト値は400
-- 2013/05/29 追記 --
jQuery1.3前は、durationに0を指定した場合の挙動が期待したものと違う結果となることがわかった。
なのでこの場合はcss()の方を使う必要がある。



なお先述した例ではjavascriptをHTMLファイルに直接記述しているがその部分は外部のjsファイルにして読み込むようにするのがよい。
これはコメントアウトの解釈の問題もあるがSEO的にもその方がよい。

同じように、スタイルシートも要素に直書きしているところはclassやidを割り当てて外部cssファイルとした方がよい。

…俺はめんどくさいからついそのままにしちゃうんだけど。







--
ちなみに個人的な感想としてはアニメーション効果は使わない方がいいと思う。

アニメーション効果を使うとどうしてもスクロールするたびにそのアニメーションがちらちらと目に入るのではっきりいってうざったい

もちろんそのぶん注目効果は高いとは思うがそもそもイライラするようなサイトはそれ以前に客足が減るのではなかろうか。


まあページにはなにかと動きを付けた方が上司や取引相手は喜ぶものだ。
お金も取りやすいしね