お寿司か焼き肉食べたい

まじめな事からしょーもない事まで
金剛型2番艦【比叡】
  • ¥999,999,999 3349800ポイント(やりました)
  • お取り寄せできぬい 日本全国配達料金無料?
めにゅーを開く(投げやり)

とあるどこかを超えると出現する要素

表示されているものが追従してくるのではなく
隠れている要素が出てくるしくみ

ソースと説明

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;

デモ

これが隠れたら追従がでてきます。