おーとえすとさいと

「おーとえす」が「サイト」を作ったり更新したりしてる時に思う事を書いていければ良いなと思います

*

フッターの表示をjQueryでほんのちょっと格好良くしてみた

   

footer_fixed

前に、Stocker.jp / diaryのページに行った時に「このサイトのフッター良いなー」ってなったんです。格好良いなーって。
それで、どうやってんのか見てみたらCSSで実装してるっぽくて、一応自分にも出来そうだったのでやってみたんですが、結構色々面倒だったんです。
その面倒な部分はCSSでやろうとするから面倒であって、jQueryを使ったら簡単なんじゃないかな? って思ったので、やってみました。

サンプルページ

最初にどんな感じになるのか、サンプルページを紹介しておきます。
サンプルページの元になっているページは自分の別ブログ「ファンブログハック」です。なんか、丁度良かったのでw
(というか、「おーとえすとさいと」だとフッターが低いので分かりにくいかなーとか思ったので。)

サンプルページ footer fixed

実装したjQueryのコード

では、以下にどんな感じで実装したのか、実際のコードを紹介します。
(jQueryを使っているので、jQueryを設置していない方はブログにjQueryを設置する方法 – ファンブログハックなどを参考にして設置してから以下のコードを試してみて下さい。)

var jFooter = $("#footer");
var jContainer = $("#container");

var footerMarginBottom = parseInt(jFooter.css("margin-bottom"));
var footerHeight = jFooter.outerHeight() + parseInt(jFooter.css("margin-top") + footerMarginBottom);

if (window.innerHeight > footerHeight) {
    var scrollLeftTmp = jFooter.offset().left;
    jFooter.css({
        position: "fixed",
        bottom: footerMarginBottom,
        left: scrollLeftTmp,
            "z-index": 5
    });

    var marginbottomtmp = parseInt(jContainer.css("margin-bottom"));
    jContainer.css({
        position: "relative",
            "margin-bottom": (marginbottomtmp + footerHeight),
            "z-index": 10,
            "box-shadow": "0px 5px 5px rgba(0,0,0,0.3)"
    });
}

htmlのコードは、以下の様にフッターとその上のコンテナーがある感じです。

<div id="container">
~~
</div>
<div id="footer">
 ~~
</div>

なので、#containeはフッターの上の要素を指すidなどに適宜変更して使ってください。

何がCSSだと面倒だったのか

何がCSSだと面倒で、なんでjQueryでやったかって言いますと、#container部分のmargin-bottomのところが面倒だったんです。
CSSだと定数しか使えないので、フッターの高さを固定しないと良い感じに表示できない訳です。まあ多めに余白を取っておけば良いってこともあるんですが。

そこで、jQueryでフッターの高さやマージンなどを計算して、その値を使ってmargin-bottomを設定するっていう方法にしてみました。

あと、CSSで単純に表示位置を「bottom:0px」とだけ書いておくと、幅がウィンドウの横幅以下の場合に左に寄ってしまう、ってのも問題でした。そこらへんもjQueryでoffset()とか使ってやってます。

あと、フッターの高さが高くて、ウィンドウサイズよりも大きい場合にfixedにしてしまうと上の方が表示できないって事ですね。例えばスマホとか、スマホの横向き表示とか、単純にフッターがめっちゃ高いとか。そういう場合には通常通り表示させる為にifとか使って対応しました。

CSSで引っかかった所

余談ですが、自分が実装していてつまずいたというか、引っかかったところは「z-index」です。これ、positionがstaticの物とその他の物とでは同様に数値を扱ってくれないんですよ。そこに気付かず引っかかってましたw 気付くまで割と時間かかりましたね。。w
(例えば、今回の例で#containeのpositionをrelativeにしないと、z-indexの値が大きくても上に表示されないって事が起きるんです。)

最後に

そんな感じで、フッターをjQueryでほんのちょっと格好良く表示するようにしてみるアイディアとかコードの紹介でした。コードはほとんどそのまま使っても使えると思うので、使ってみたい方は使ってみて下さい。

使ってみてデザインが崩れるとか、動作しないとか問題があれば気軽にコメント頂ければ幸いです。


 - ブログデザイン

Message

メールアドレスが公開されることはありません。

  関連記事

no image
暇潰しの為のアンテナサイト「6sec.」を少し更新しました

前に、「作成中のアンテナサイトがあって、アイディアだけ紹介しておきます。」みたい …

open_sidemenu
サイドバーって死んだの? 〜STINGER5のスマホ表示をカスタマイズ〜

こんにちは。 社会人1年目で現実の厳しさを知って参っているおーとえすと申しますw …

css_hover_catch
cssの:hoverの色々な使い方

cssで:hoverって言う類似クラスと呼ばれる物があるんですが、こいつの色々な …

qlookblogdesign2
素人が考えるブログデザインの作り方「え? もしかして時代遅れ?w」

時間は万能薬のデザインを少し変更しました! その際、素人ながらに何を考えて、どう …

no image
blockquoteタグをCSSだけで格好良いデザインにする【画像不要】

こんにちは、面倒臭がりです。 自分は面倒臭がりなので、ちょっとデザインをいじりた …

no image
アクセスが増えてきたのでブログデザインを改良しました

前回、素人が考えるブログデザインの作り方「え? もしかして時代遅れ?w」という記 …

no image
記事を読み終えた時に関連記事をさりげなくアピールするスクリプト

自分は、記事を読み終えた時にニョロっと出てくる関連記事とかが苦手です。スクロール …