要素をスクロールに遅延追従
バナーなどサイドの要素をスクロールに少し遅れて移動
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').animate({ top : upper_top }, 30);
} else {
$('#banner').animate({ top : variable_top }, 30);
}
} else {
// デフォルト
$('#banner').animate({ top : 0 }, 30);
}
});
});
通常版は要素をスクロールに追従を参照。
CSS
#side {
position: relative;
}
#banner {
position: absolute;
}
HTML
<div id="main"></div>
<div id="side">
<div id="banner"></div>
</div>
サンプル
