footerをウィンドウ下部に固定する『footerFixed.js』

このエントリーをはてなブックマークに追加

footer部分を画面下部に固定するためのjsライブラリ『footerFixed.js』を作成しました。

フッターをコンテンツの内容量にかかわらずwindow下部に表示させるためのjsライブラリです。

サンプル

設置方法は

head要素なのでfooterFixed.jsを読み込みます。

<script type="text/javascript" src="./footerFixed.js"></script>

ウィンドウ下部に固定したい要素にid属性「footer」を付けます。

これでその要素をウインドウの下部に表示させることが可能です。

(ウインドウの下部というのがわかりにくいと思うのですが、内容量がウィンドウサイズを超える場合は通常通り、内容量がウィンドウサイズより小さい場合はウィンドウの下部に配置という意味です。)

画面下部にフッター表示はめんどくさいですがCSSでも可能ですので、CSSが好きな方はこちらをお勧めします。

MITライセンスです。

参考:画面下部にフッター表示

関連エントリー

ブロックレベル要素の高さを揃えるheightLine.js
アルファ画像を扱うalphafilter.jsライブラリ
一番簡単な画像置換の方法-imageReplace.js-
ページ内リンクをスマートにするsmoothScroll.js
半角カナを全角カナに変換するjsライブラリ
ie以外でもクリップボードが使えるsetClipboard.js

スポンサードリンク

«DOM 読み込み完了時に関数を実行する domready.js | メイン | 【Adobe Spry TIPS】 目次»

このエントリーのトラックバックURL
http://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/1173
コメント

お初です。

<?xml version="1.0" encoding="shift_jis"?>

を記述しなければ固定なるのですが・・・
記述すると固定なりません・・・

記述した状態でも固定なるようにするにはどうしたらいいのでしょうか

投稿者:すももも | 2008年10月16日 15:22

フッター下の余白をなくしたくて色々調べてこのページにたどり着きました。
早速使わせて頂こうと思い実装してみたのですが、IE6だと何故か下に余白が出来てしまいます。

head内にjsのリンク先を記述し、フッター部分のcssは
#footer{
clear:both !important;
display:block;
height:40px;
margin:0;
padding:0;
bottom:0;
background:#000000 url(../images/foot_bg.jpg) repeat-x;
}
と指定しています。
cssの記述のせいでうまくいかないのでしょうか?

サンプルを拝見させて頂くとIE6でもきちんとフッターが下部にきているので
cssが邪魔をしているのかなぁ・・・としか考えられないのですが如何でしょうか。

アドバイスいただければ幸いです。
よろしくお願い致します。

投稿者:nuts | 2009年9月28日 19:16

>nutsさん

#footerを包んでいる要素かbody要素なんかに指定されているmarginやpaddingなんかが影響してしまってるかもしれません。
それらを変更して試してみてください。

投稿者:西畑一馬 | 2009年12月25日 06:51

こんにちは。
大変利便性の高いライブラリのご提供まことに感謝いたします。
つきましては、ライセンスについて詳しく教えていただけないでしょうか?

投稿者:siro | 2010年9月 4日 01:57

>siroさん

本ライブラリはMITライセンスで公開しております。

投稿者:西畑一馬 | 2010年9月 5日 12:28

素晴らしい

投稿者:匿名 | 2013年4月20日 09:26

おかげさまで簡単にできました!しかしCSS3で指定したグラデーションが途中で切れてしまいます。どうしたらいいでしょうか?

投稿者:大西 | 2013年5月 2日 11:29

いつも本当に有難うございます。
メインエリアの背景が途中で切れてしまったので、
改造して使用させていただきました。
要jQueryです。
もしかしたら大西様の問題もこれで解決するかもしれませんね。

<を全角にしているのでお気をつけ下さい。
#headerWrapの部分をheaderのidに
#mainWrapの部分を、メインの部分のidに変更します。

30行目付近から

if(ft+fh<wh){
//追記部分開始
var mainH = wh - fh - $('#headerWrap').height();
//追記終了
//記述変更
//document.getElementById(footerId).style.position = "relative";
//document.getElementById(footerId).style.top = (wh-fh-ft-1)+"px";
document.getElementById(footerId).style.top = (wh-fh-ft)+"px";
//追記部分開始
$('#mainWrap').css({height:mainH});
//追記終了
}
投稿者:さいとう | 2014年4月 8日 17:08

ご連絡失礼致します。
ビズベクトルのテーマを使用している初心者です。

場違いかもしれませんがフッターをスマホでもコンテンツの下に表示させたいのですが

footer.php
index.php
page.php
functions.php
ワードプレスの固定ページ編集

どこになにを書けばいいのかわからないので
本当に申し訳ございませんがよろしくお願いします。

投稿者:mito | 2014年4月18日 18:55

すばらしいライブラリをありがとうございます!

色々と試してみたところ、overflow: hidden の指定をすると、フッターが消えてしまうようでした。

フッターを横幅いっぱいにするために
margin-left: -500%;
margin-right: -500%;
padding-left: 500%;
padding-right: 500%;
という指定とともに、
上述した overflow: hidden を使用したいのですが……

難しいでしょうか。

投稿者:Yuki | 2014年11月 7日 21:12

便利なライブラリの提供ありがとうございます。
MITライセンスとありますが、具体的にはどのような形で著作権表記をすれば宜しいのでしょうか。

投稿者:Anonymous | 2016年7月 4日 00:09

>Anonymousさん

ライブラリ内に著作権表記がありますので、それを削除しなければ問題なく利用いただけます。

投稿者:西畑一馬 | 2016年9月 8日 15:11
コメントを投稿