要素をスクロールに追従

バナーなどサイドの要素をスクロールに合わせて移動

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>

サンプル

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。
主にLAPP環境でPHPを書いています。
最近はjQueryをよく書いています。