今回も、web初心者向けにスクロールするとコンテンツが追従するのjQueryを実装します。
ページコンテンツ
jQueryを動かすために STEP1
head内にいつもおなじみののコードを書いてください。
1 |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> |
実際に動く記述を書きます STEP2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$(function() { var $sidebar = $("#sidebar"), $window = $(window), offset = $sidebar.offset(), topPadding = 15; $window.scroll(function() { if ($window.scrollTop() > offset.top) { $sidebar.stop().animate({ marginTop:$window.scrollTop() - offset.top + topPadding; }); } else { $sidebar.stop().animate({ marginTop:0; }); } }); }); |
「topPadding」はスクロールした時に追従するコンテンツの上部分の余白です。
追従するHTMLを設置します STEP3
1 2 3 4 5 6 7 8 |
<div id="sidebar"> <ul> <li>yahoo</li> <li>google</li> <li>msn</li> <li>livedoor</li> </ul> </div> |
idが「sidebar」の箇所がスクロールすると追従します。
※中身は<ul>で作っていますが何でも良いです。
まとめ
[サンプル] jQuery スクロールすると追従するコンテンツ
よくわからなかった人もいるかもしれませんが、このサンプルのソースを全部コピーしても使えます。この追従のjQueryですが、サイトでよく使われているのを見かけます。 メインコンテンツが縦に長くて、サイドのコンテンツが少ないときなどに使えます。
※firefox、クローム、IEで動いていることを確認しております。
今回の記事を作ったときに参考にしたサイト [参考サイト]