直帰率改善に！スクロールしてもサイドバーを固定して記事一覧を表示する方法

ブログ等にアクセスしてくれたユーザーが、そのページを観ただけですぐに出て行ってしまう直帰率を下げる手段はいくつかあります。例えば関連記事や人気記事を表示して、それらのページも観てもらうという方法があります。当サイトでも関連記事を表示しています。

ただそれらの記事一覧もユーザーの目に留まらなければ意味がありません。そこで今回お勧めしたいのが、サイドバーに表示した記事一覧を固定する方法です。通常はスクロールしてしまえば上に消えてしまうものですが、記事一覧をサイドバー上部に固定してしまえばユーザーの目に留まりやすくなります。

サイドバーを固定するコード

とても簡単なコードをコピペするだけで実装ができます！

HTMLに追加

まずはHTMLに下記のコードを入れてください。ヘッダーやフッターに入れると良いです。

<script>
$(function($) {
var tab = $('.sidescroll'),
offset = tab.offset();

$(window).scroll(function () {
if($(window).scrollTop() > offset.top) {
tab.addClass('fixed');
} else {
tab.removeClass('fixed');
}
});
});
</script>

jQueryを読み込んでいない場合は、上記コードの上に下記も追加してください。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

次に固定させたい部分（divタグ等）に class=”sidescroll” を追加してください。

<pdiv class="sidescroll">この中のコンテンツが固定される</div>

CSSに追加

CSSには下記のコードだけ追加すればOKです！

/* サイド固定
---------------------------*/
.fixed{
position:fixed;
top:25px;
width: 300px;
}

※横幅などはサイトに合わせて変更してください。

いかがでしょうか？とても簡単にサイドバーを固定させることができますね！直帰率改善にぜひ役立ててみてください。