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

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

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

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

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」という値に特に意味はありません。

最後に

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

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

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