MENU

jQueryを使って一定のスクロール位置に来たら、フッターを固定・解除する

よくあるUIで、サンプルや実装方法は他のサイト様でもよく紹介されていたのですが、フッターを固定・解除するものを実装している時に見事にハマったので、ハマった箇所、実装方法を合わせてメモしておこうと思います。

簡単なものですが、サンプルを用意しました。

DEMO

画面下に配置されていた、フッター部分が、最後までスクロールすると、標準の配置に切り替わります。

実装方法

HTMLの構造はこんな感じ。

最低限のCSSは以下。

ポイントはフッターの高さを予め決めておくことと、標準配置用のスタイルを準備しておくことくらいです。

 

JSは以下です。

動作の基本は、基準となる要素の座標までスクロールしたら標準配置用のクラスを当てるといった感じです。

今回はフッターを操作するので、画面下の座標を求めて、要素と比較します。

 

scroll、resizeイベントではそれぞれ座標を求めて、描画の更新を行います。

ハマった箇所

と、ここまでは他のサイトを参考にしつつすぐに実装出来たのですが、なんだか切り替わりの際に位置がずれてしまっていました。

ずれてしまっていた原因は、$(function(){}); でした。

DOMの構築が終わっても、画像などを大量に使っていた場合、contentTop の値が実際の値とずれていたためです。

$(window).load() を使ってページの読み込みを待つことで正確な値で取得出来て、スムーズに切り替わってくれました。

この記事をシェアする

コメントお待ちしています。

アドレスは非公開です。お気軽にコメント下さい。

*