とあるどこかを超えると出現する要素
表示されているものが追従してくるのではなく
隠れている要素が出てくるしくみ
ソースと説明
var timer = null, contentOpenFlg = 0, // 0:閉じている 1:開いている slideMoveFlg = 0, borderElemData = {}; borderElemData['element'] = $('#chkElem'); borderElemData['offsetY'] = borderElemData['element'].offset().top; borderElemData['height'] = borderElemData['element'].outerHeight(); borderElemData['borderLine'] = parseInt(borderElemData['offsetY']) + parseInt(borderElemData['height']); borderElemData['slideSpeed'] = 200; //------------------------------------------------------------ // 初期動作 //------------------------------------------------------------ if($(window).scrollTop() >= borderElemData['borderLine']) { if(contentOpenFlg == 1 || slideMoveFlg == 1) return false; slideMoveFlg = 1; $('#hFixedContents').slideDown(borderElemData['slideSpeed'],function() { slideMoveFlg = 0; }); contentOpenFlg = 1; } $(window).on('scroll',function() { clearTimeout( timer ); if(slideMoveFlg == 1) return false; timer = setTimeout(function() { if($(window).scrollTop() >= borderElemData['borderLine']) { //------------------------------------------------------------ // 表示処理 //------------------------------------------------------------ if(contentOpenFlg == 1 || slideMoveFlg == 1) return false; slideMoveFlg = 1; $('#hFixedContents').slideDown(borderElemData['slideSpeed'],function() { slideMoveFlg = 0; }); contentOpenFlg = 1; } else { //------------------------------------------------------------ // 非表示処理 //------------------------------------------------------------ if(contentOpenFlg == 0 || slideMoveFlg == 1) return false; slideMoveFlg = 1; $('#hFixedContents').slideUp(borderElemData['slideSpeed'],function() { slideMoveFlg = 0; }); contentOpenFlg = 0; } }, 100); });
本ソースで書き換えが必須なのは2箇所です。
borderElemData['element']
これは【どの要素を超えたら】の要素に当たります。
その要素の表示位置や高さ幅等を考慮しての計算は勝手にやってくれますので
エレメントの指定だけしてください。
borderElemData['slideSpeed']
追従コンテンツはslideUp / slideDown で行っています。
そのアニメーション速度になります。
判定位置について
このデモでは【とある要素が見えなくなったら】の判定を行うようにしています。
ページ先頭からのoffsetの位置と要素の高さ(paddin border含む)を足して、その結果を判定しています。
もし、【とある要素に到達したら】の条件を行う場合は下記のように
borderElemData['height']へ代入している値を0にしてください。
borderElemData['height'] = borderElemData['element'].outerHeight(); ↓ borderElemData['height'] = 0;
デモ
これが隠れたら追従がでてきます。