bttom固定のfixedなメニューをページ途中で止める方法

下部で固定しているイメージ

スマートフォンサイトのメニュー表示方法としてすっかりポピュラーになったposition:fixedによるメニュー固定。簡単で便利なのですがスクロールに合わせて固定範囲を制御しようとするとjsによる制御が必要になります。
今回はそんな固定メニューの、bottomで固定しfotter上で止まる固定メニュー、の実現方法を紹介します。

各部の高さを取得する

サンプルのhtmlは以下です。

<div class="body">
 <div class="fixnav">
  navigation
</div>
<div class="footer">
  footer
</div>  
</div>

<Style>
.body{
  padding-top:2000px;
  background-image: linear-gradient(to bottom, #066, #cff, #066);
}
.fixnav{
  text-align:center;
  padding:20px 0;
  background-color: #fff;
  color:#000;
  font-weight: bold;
  font-size: 18px;
}
.footer{
  text-align:center;
  padding:20px 0;
  background-color: #066;
  color:#000;
  font-weight: bold;
  font-size: 18px;
}
</Style>

フッターナビはpositionなしの状態では止めたい箇所にあるようにコーディングします。

メニューをページのどこで止めるのかを記述するために、ページ内の高さを取得する必要があります。止めるためには、
ページの最下部の高さ - ページのスクロール量 <= ナビを止めたい高さ の3つの要素が必要なのでそれぞれを取得します。
jqueryでの取得方法は以下になります。

scrollHeight = $(document).height();
scrollPosition = $(window).height() + $(window).scrollTop(); 
footHeight = $(".footer").innerHeight();

各状態をif文で分ける

ナビがページのbottomに固定されている状態と、先程設定した高さで動きを止めている状態をif文で分けます。
サンプルコードは以下です。

$(window).scroll(function() {
  scrollHeight = $(document).height();
  scrollPosition = $(window).height() + $(window).scrollTop(); 
  footHeight = $(".footer").innerHeight(); 
  if ( scrollHeight - scrollPosition  <= footHeight ) { 
    $(".fixnav").css({
      "position":"static", 
      "bottom": auto 
    });
  } else { 
    $(".fixnav").css({
        "position":"fixed", 
        "bottom": "0px" 
    });
  }
}
);

ページ下部に固定しているので、bottom基準で記述しているのがポイントです。