Web初心者がjQuery スクロールするとコンテンツが追従するを実装する方法(サンプル付き)

投稿日：2013年8月19日

今回も、web初心者向けにスクロールするとコンテンツが追従するのjQueryを実装します。

photo credit: Kalexanderson via photopin cc

ページコンテンツ

jQueryを動かすために STEP1

head内にいつもおなじみののコードを書いてください。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

1	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

実際に動く記述を書きます STEP2

$(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;
			});
		}
	});
});

$(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

<div id="sidebar">        
                <ul>
                    <li>yahoo</li>
                    <li>google</li>
                    <li>msn</li>
                    <li>livedoor</li>
                </ul>    
            </div>