スペースを有効に、jQueryでスクロールすれば現れるコンテンツ

このブログのように2カラムのレイアウトでメインコンテンツが長いと、スクロールしたときにサイドのスペースがなくなってしまいもったいないですよね。

サイドのコンテンツが終わった時点で固定されたコンテンツが現れたら無駄なくスペースを使えるのではないでしょうか。

jQuery-fixedbox.png

ということで、サイドのコンテンツが終わったら固定されたコンテンツが現れるようにする方法を紹介します。

説明が下手で、イメージしにくい方もおられると思いますので、サンプルを用意しました。

イメージできましたでしょうか?

HTML

現れるボックスに何を表示するかによって中身も違ってくるので、とりあえず外枠だけ載せておきます。

<div id="fixed-box">
この中に表示したいコンテンツの内容を記述します。
</div>

挿入場所はサイドのコンテンツと同じ場所にします。

私は、はてブやツイートのボタン、ページ上部までスクロールするボタン、アドセンスが表示されるようにしています。おすすめ記事や関連記事を表示している人も多いですね。

JavaScript

jQueryを使います。せっかくですのでGoogle Libraries APIを使っています。2012.6.24現在の最新版は1.7.2だそうです。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

で、JavaScriptはこんな感じにします。

<script>
$(function(){
  $("#fixed-box").hide();
  $(function () {
    $(window).scroll(function () {
      if ($(this).scrollTop() > 1000) {
        $('#fixed-box').slideDown(100);
      } else {
        $('#fixed-box').slideUp(100);
      }
    });
  });
});
</script>

それでは内容を簡単に説明します。

6行目      if ($(this).scrollTop() > 1000) {

この場合1000pxスクロールした時点でボックスが現れます。サイドのコンテンツが終わってから表示されるよう調整しましょう

次はボックスの現れ方です。最初はスライドして現れるようにしています。

7行目        $('#fixed-box').slideDown(100);

slideDownをfideIn fadeInにすればフェードインして現れます。

9行目        $('#fixed-box').slideUp(100);

slideUpをfideOut fadeInにすればフェードアウトして消えます。

あと、両方にある「100」は現れる(消える)までの時間で、「100」だと0.1秒となります。この数字はなくても大丈夫です。

CSS

CSSはこの3つは入れておく必要があります。後はブログのレイアウトに合わせてご自由に設定するといいです。

position: fixed;
top: 30px;
z-index: 100;

それでは内容を簡単に説明します。

1行目    position: fixed;

現れたコンテンツを固定して表示します。これがないと意味がないですね。

IE6以下では動きませんが、このブログはIE6以下は無視していますので気にしません。どうしてもという場合は、「CSSのみでIE6にposition:fixedを対応させる | CSS-EBLOG」が参考になると思います。

2行目    top: 30px;

上から30pxのところで固定しています。下に固定されているサイトもよく見かけますね。

3行目    z-index: 100;

これはなくてもいい場合もあるのですが、スクロールしてフッターとかぶってしまうとフッターが見えなくなるので、フッターを優先して表示させるために指定します。

「100」という値に意味はありませんがフッターで指定する値より小さくする必要があります。

で、フッターには以下のCSSを追加してあげる必要があります。

position: relative;
z-index: 200;

こちらも「200」という値に特に意味はありません。

最後に

これはこのブログでも使っていて、解説してほしいというコメントいただきましたので、早速記事にしてみました。

ボックスの中身やレイアウトはブログごとで違ってきますので、共通して必要となる部分のみを紹介しました。

スペースを有効に使うという意味では非常に有効だと思いますので、ぜひご活用ください。

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
fideIn じゃなくて fadeIn では?
【2012/08/28 14:55】 | - #- | [edit]
ご指摘ありがとうございます。
恥ずかしながら間違っていましたので訂正いたしました。
【2012/08/28 16:24】 | 管理人 #E2ywrYdA | [edit]
スクロールバーが一定位置に達してから固定されるものは
よく見かけるのですが、固定されたままで解除されるものは
あまり見かけない気がします。解除する場合は他にどのような
ことを考える必要があるのでしょうか?
【2013/08/18 21:49】 | ライト #- | [edit]
すいません、本文を読んでみるとフェードアウトについても解説されていました。
とりあえず、設定を変更した二つのjavascriptファイルを用意して試してみます。忘れてください、自分で試さずにスグに聞こうとしたことを反省しようと思います。
【2013/08/19 02:00】 | ライト #- | [edit]
ライトさん

自己解決できてよかったです~
うまくいくことを願っています。
【2013/08/19 06:05】 | 管理人 #E2ywrYdA | [edit]









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

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