【jQuery】コピペで簡単!スクロールしても追尾するサイドバーの作成方法

thumb20161116

こんにちは。

 

みなさんはサイドバーのスペースを有効活用できていますか?

 

1

1カラムのレイアウトではない場合は、サイドバーに新着記事やカテゴリー一覧などのページ内リンク等を配置していると思います。

しかし、コンテンツが長いとスクロールすることでサイドバーが隠れてしまいます。

2

 

 

サイドバーなどを通じて他の記事を見てもらうことは、直帰率を下げることにもつながると思います。

そこで、サイドバーを『スクロールしても追尾してくるサイドバー』にすることでユーザビリティの低下を防ぎ直帰率を下げましょう!

3

 

ちなみに、当ブログでも『スクロールしても追尾してくるサイドバー』を使用しています。

 

 

下準備

今回はjQueryを使用するのでjQueryがない方はこちらの記事をみてjQueryを導入して下さい。

スクロールしても追尾してくるサイドバーを作成するには、一定以上スクロールした時にposition:fixedをサイドバーに付与すればいいです。

今回はjQueryの.addClassを使用して付与するので予めスタイルシートに以下のCSSを記載します。

.fixed {
  position:fixed;
  top: ○○px; //任意の値
}

topにはサイドバーを固定するときの上からの距離を記入します。今回は上から20pxの位置でサイドバーを固定したいのでtop: 20px;としました。

では下準備が出来たので次のステップに進みましょう。

 

 

一定以上スクロールしたら追尾させる機能を付ける

<header>ヘッダー</header>
  <div id="content">
    <div class="wrap">
      <div id="main">メインコンテンツ</div>
      <div id="side">サイドバー</div>
    </div>
  </div>
<footer>フッター</footer>

今回はデモも用意しました。上記の構成のページを確認することが出来ます。
デモ1

 

まず、jQueryを使った『一定以上スクロールしたら先程作った.fixedを付与する機能』を作ります。

$(window).load(function () {
  var side = $('#side');
  var offset = side.offset();
  $(window).scroll(function () {
    if($(window).scrollTop() > offset.top - 20) {
      side.addClass('fixed');
    }else{
      side.removeClass('fixed');
    }
  });
});

デモ2

細かい説明は省きますが、$(window).scrollTop()でスクロール量を習得し、その値でに応じで.fixedを付与したり取り除いたりしています。

フッターにコンテンツを配置しないサイトの場合この方法を使えば問題なく動作します。しかし、フッターにコンテンツを配置する場合はサイドバーがフッターに侵入してしまうので修正する必要があります。

 

 

一定区間内のみスクロールするサイドバーを作る

デモ3

デモ3をご覧頂ければわかると思いますが、サイドバーがフッターに侵入しています。

次のコードはサイドバーがフッターに侵入しないように<div id=”content”>内に収めるためのコードです。

 

 

指定区間内のみスクロール機能を付与する

デモ4

$(window).load(function () {
    var side = $('#side');
    var s_offset = side.offset();
    var content = $('#content')
    var c_offset = content.offset();
    $(window).scroll(function () {
        if ($(window).scrollTop() > s_offset.top - 20) {
            side.addClass('fixed');
            var scrollBottom = $(window).scrollTop() + side.outerHeight() + 20;
            var contentBottom = c_offset.top + content.outerHeight();
            if (contentBottom <= scrollBottom) {
                side.css({
                    position: 'absolute',
                    top: contentBottom - side.outerHeight()
                });
            } else {
                side.css({
                    position: '',
                    top: ''
                });
            }
        } else {
            side.removeClass('fixed');
        }
    });
});

 

<div id=”content”>内に収まっているのが確認できると思います。

仕組みとしてはページの読み込み時に<div id=”content”>の最下部の相対的な位置を習得し、サイドバーの最下部が<div id=”content”>の位置に来た時にpsition: absolueをサイドバーに付与することで最下部に固定させています。

 

 

完成品(コピペ用)

$(window).load(function () {
var wW = $(window).width();
if (wW > '767') {
    var side = $('#side');
    var s_offset = side.offset();
    var content = $('#content')
    var c_offset = content.offset();
    $(window).scroll(function () {
        if ($(window).scrollTop() > s_offset.top - 20) {
            side.addClass('fixed');
            var scrollBottom = $(window).scrollTop() + side.outerHeight() + 20;
            var contentBottom = c_offset.top + content.outerHeight();
            if (contentBottom <= scrollBottom) {
                side.css({
                    position: 'absolute',
                    top: contentBottom - side.outerHeight()
                });
            } else {
                side.css({
                    position: '',
                    top: ''
                });
            }
        } else {
            side.removeClass('fixed');
        }
    });
}
});

レスポンシブ対応版です。

コピーして$(‘#side’)などを自分用に変更してから<script></script>内にペーストしてお使い下さい。

$(window).width()を使用して画面のサイズを習得し、横幅が767px以上の場合のみ追尾が適応されるようになっています。

 

 

まとめ

コピーペーストするだけで追尾するサイドバーが作れると思うので是非使ってみて下さい。
ただ、広告を追尾させると利用規約に違反する場合があるのでしっかりと利用規約を確認しましょう。Goodle Adsenseなどは利用規約違反になります。

expand_less