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

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

Posted at September 10,2012 1:55 AM
Tag:[jQuery, PersistentHeaders]

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

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

1.サンプル

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

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

サンプル
サンプル

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

クレジットバナー

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

2.設定方法

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

まず、本ブログで配布している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;
}

以上です。

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)