要素をスクロールに追従
バナーなどサイドの要素をスクロールに合わせて移動
jQuery
$(function () {
var default_top = $('#banner').offset().top;
// 上限top値
var upper_top = $('#main').outerHeight() - $('#banner').outerHeight();
$(window).scroll(function() {
// スクロール位置がデフォルトの高さを超えた場合は値を動的に設定
if ($(window).scrollTop() > default_top) {
// 可変top値
var variable_top = $(window).scrollTop() - default_top;
if (variable_top > upper_top) {
$('#banner').css('top', upper_top);
} else {
$('#banner').css('top', variable_top);
}
} else {
// デフォルト
$('#banner').css('top', 0);
}
});
});
CSS
#side {
position: relative;
}
#banner {
position: absolute;
}
HTML
<div id="main"></div>
<div id="side">
<div id="banner"></div>
</div>
サンプル
