footerを最下部に固定するjQuery【コードの解説】

footerを画面の一番したに固定しておくしくみです。

CSSで固定する方法もありますが、jQueryで固定した場合どんな仕組みかを書いています。

jQueryの基本を把握するのに良い題材ですね^ ^

メインのコンテンツが少ない場合、footer部分が上に上がってきちゃうんです。

それをjQueryで固定させることができます。

まず、HTMLを準備。id属性で操作します。

footerを最下部に固定。jQuery

scriptタグで、jQueryを読み込み。関数を作成後、変数を作ります。

「ドキュメントの上からfooterまでの高さ+footer自身の高さの合計」よりも、画面全体の高さが大きくなったら、styleを付け足すという流れですね。

付け足す高さは、「画面全体の高さ-footer自身の高さ」。これでfooterが最下部に固定されることになります。

めでたし、めでたし。

CSSで固定する方法もありますが、jQueryの基本を練習するには最適です。