スクロールの途中でサイドバーを止める方法

2012-10-01［WordPress］

当サイトではアフィリエイト広告を利用しています。

サイトリニューアルを行った時にサイドバーの情報を極力減らした結果、記事が長い時にサイドバーが「空白」が続くようになりました。といっても、元々長い記事が多いためサイドバーの情報が多くても消えるんですけど^^

そのままでも良かったんですけど、サイドバーだけスクロールを止めてコンテンツが残るようになっているサイトを見つけたので、それを真似てサイドバーを止めてみました！

ということで、現在ジャンクワードの森ではページをスクロールしていくと、サイドバー（右側ね）がとある部分で止まって固定表示されるようになっていると思います。

いらん能書きはこの辺にして、実際にスクロールの途中でサイドバーを止める方法をメモっておきます。

まず大前提として必須になるのは「jQuery」
これがないとスクロールを止めることはできません（いや、、多分できると思いますが、色々と面倒なことが増えると思います）。

jQueryの読み込みに関しては、いくつかの方法がありますがジャンクワードの森では、Google Ajax APIのCDNを使用しています。

以下の記述を「～」の中に追記
[php]<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>[/php]

※WordPressの場合、「header.php」の中になります。

次にサイドバーの設定ですが、スクロールを止めたい基点となるボックス（ここから下が常に表示されることになります）に「id」を設定。

[html]<dl id="ads">
<dt><p>ad</p></dt>
<dd>
</dd>
</dl>[/html]

↑ジャンクワードの森の場合、サイドバーは「<dl><dt>～<dt><dd>～<dd></dl>」を使ってコーディングしているため、上記のようになっていますが「<div>～</div>」でも問題はありません。

次にCSSで「fixed」の設定を行います。

[css].fixed {
position: fixed;
top: 20px;
}[/css]

CSSの時点では「fixed」特定のセレクタに付けずにオープンな状態にしておきます（#adsとの連携はjQueryで行います）。

最後の仕上げとして、以下の記述を「～」の中、jQueryの読み込みの下に追記

[php]<script type="text/javascript">
jQuery(function($) {

var nav = $(‘#ads’),
offset = nav.offset();

$(window).scroll(function () {
if($(window).scrollTop() > offset.top – 20) {
nav.addClass(‘fixed’);
} else {
nav.removeClass(‘fixed’);
}
});

});
</script>[/php]

ポイントは「$(‘#ads’)」とCSSのid（#ads）を合わせることです。
ここさえ揃っていれば、問題なく動くはずです。

以上で、スクロールの途中でサイドバーが止まるようになって、意図したいコンテンツが常に表示されるようになると思います。

運営者情報など