現在作成中のテーマで、

ヘッダー
メイン部分
position:fixed なフッター
普通のフッター

みたいな構造で、position:fixed なフッターにはページ上部に戻したり、パンくずをいれるような作りにしていて、それがページ下部に張り付き、

ページを下までスクロールして普通のフッターが現れたらそこで fixed を解除、フッターの真上に position:fixedだったフッターを配置する、というのがやりたくて（文字だと説明が難しいな…）いろいろ調べてたのですが、なんとかなったのでとりあえずメモ。

そもそも何がしたいのかこれじゃ伝わりにくいですね。

ようは、フッターが上下に分割されていて、上部分はページ下部にくっついてるけど、下部分と合流したらこんどはフッター側にくっつくようにする…んですが。言い直してもやっぱわからんな。動き見れば「あーこれかー」って鳴ると思うんですが。

ということで、とりあえずデモ。

jsFiddleは埋め込むとなんか2重スクロールバーになってしまい、肝心の下にひっつく要素が見えないので、とりあえず右のスクロールバーを掴んで下までスクロールしてから左のスクロールバーを掴んで動かしてみてください。

（或いは新しいMacOSとかだとスクロールバーがかぶってそれすらできない可能性もあるんで、その時は fiddle のなかのコンテンツをパンくずが出てくるまでスクロール→上に戻る→またフッターまでスクロール…とやればなんとなく伝わる…かなぁ）
大急ぎでつくったんで結構雑ですが、とりあえず雰囲気だけでも伝われば…！

実際のコード

で、実際のやりかたですが、こーんなかんじでスクリプトをかきます。

2行目の ‘footer’ はサイトのフッターを指定します。
footer 要素つかってるなら上記の通りだし、 id=”footer” とかなら、 #footer を指定すればOK。

参考にした元のスクリプトがページの一番下まで来た時に計算結果が 0 になることで、それをトリガーにアクションを起こしていますので（正確には下から5%の位置で動作するみたいですが）、

それに加えフッターの高さを取得して計算に加える事で
「ページの最下部からフッターの高さ分上」つまり、「フッターが見え始めるタイミング」でアクションが起こるように修正しました。

あとは、フッターが見え始めるタイミングから、「position:fixed」を「fixed」「absolute」以外のものに書き換えることで画面下にひっつくのを止め、本来の位置（っていい方も変ですが）に表示されるようになります。

更に、上にスクロールして戻った時はまたひっつけたいので、 else で条件から外れた時はまた「position:fixed」をつけて元に戻します。

この手のやつってヘッダーではよく見かけるようになったのですがフッターではみないなぁと思ったら、フッターでやる場合はヘッダーでやるのと比べて地味に仕組みを作るのが面倒くさいからなのかなぁ。

参考：

ページの下までスクロールしたときに何らかの処理を実行する例 at softelメモ