小粋空間  -  a cheap joke and a play on words site

スクロールしたときにサイドバーのパーツをjQueryで止める方法

スクロールしたときにサイドバーのパーツを止める方法についてご質問を頂きましたの、で本エントリーで紹介します。

似たような記事を、以前「jQueryでスクロールした要素をページ上部に固定するPersistentHeadersプラグイン」で紹介しましたが、サイドバーのパーツを止める場合の説明が不足していたので、改めて本エントリーで解説します。

１．サンプル

追記：サンプル復旧しました。

下にサンプルを用意しました。

サンプル

このサンプルは、スクロールしたときに、ページ右下にある「MT5」というMovable Typeのクレジットバナーを止めるようにしています。

動作はFirefoxとGoogle Chromeで確認しています。

２．設定方法

１項のサンプルを用いて解説します。

まず、本ブログで配布しているjQueryプラグイン「PersistentHeaders」のv0.0.2をダウンロードして、サーバの任意のディレクトリにアップロードしてください。

jQueryでスクロールした要素をページ上部に固定するPersistentHeadersプラグイン

次に、スクロールしたときに止めたいパーツにclass属性「persist-header」を設定し、パーツをdiv要素で囲み、class属性「persist-area」を設定します。

変更前

<div class="widget-powered widget">
    <div class="widget-content">
        <a href="http://www.sixapart.jp/movabletype/"><img src="mt-static/images/bug-pbmt-white.png" alt="Powered by Movable Type 5.14-ja" width="120" height="75" /></a>
    </div>
</div>

変更後（赤色部分を追加）

<div class="persist-area">
<div class="widget-powered widget persist-header">
    <div class="widget-content">
        <a href="http://www.sixapart.jp/movabletype/"><img src="mt-static/images/bug-pbmt-white.png" alt="Powered by Movable Type 5.14-ja" width="120" height="75" /></a>
    </div>
</div>
</div>

次に、bodyの終了タグの直前などに以下のような内容を設定します。

スクロールでパーツが止まるときに、パーツが上から下にがくっと移動するような挙動になる場合は、次のように「offset」を設定してみてください。追加したあと「isHidden」の行末にカンマを付け忘れないよう、気をつけてください。

jQuery(function() {
    jQuery('body').persistentHeaders({
        isHidden: false,
        offset: 20
   });
});

最後に、次のスタイルを追加すれば完了です。

.floatingHeader {
    position: fixed;
    top: 0;
    visibility: hidden;
}

以上です。