Result
http://jsfiddle.net/kachibito/cQzDZ/1/embedded/result,js,css,html
jQuery
var bt = $("#box").offset().top; // boxのページ上からの距離を取得 var ds = 0; $(document).scroll(function(){ // スクロール発生時の処理の記述を開始 ds = $(this).scrollTop(); // ユーザのスクロールした距離を取得 if (bt <= ds) { // スクロール距離がboxの位置を超えたら、 $("#box").addClass('follow'); // 「follow」というclassを追加する } else if (bt >= ds) { // スクロールがページ上まで戻ったら、 $("#box").removeClass('follow'); // classを削除 } });
css
#content { position: relative; background: u#333; height: 3000px; } #box { position: absolute; top: 250px; background: #333; width: 100%; padding: 30px 0; text-align: center; color: white; } #content .follow { position: fixed;/*スクロールで付加されるclass*/ top: 0; }
html
<div id="content"> <div id="box">fixed</div> </div>