jQuery Stick ‘em

JavaScript

スクロール時にその場所のコンテンツに応じたサイドバーが追従する「jQuery Stick ‘em」

ちょっと使いどころがありそうなプラグインだったので使い方をメモしときます。スクロール時にその場所にあるコンテンツに応じたサイドバーが追従してくるjQueryプラグイン「jQuery Stick ‘em」です。1つのページにいくつものブロックに分けられたコンテンツを配置する際に活用できそうですね。

[ads_center]

使い方

head内にjQueryとプラグインを読み込みます。

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
<script src="jquery.stickem.js"></script>
<script>
$(document).ready(function() {
    $('.container').stickem();
});
</script>

HTMLはこんな感じで。

<div class="container">
    <!-- コンテンツ1 -->
    <div class="row stickem-container">
        <div class="content">
            <p>sample text1</p>
        </div>

        <div class="aside stickem">
            <h2>Heading1</h2>
            <p>sample text1</p>
        </div>
    </div>

    <!-- コンテンツ2 -->
    <div class="row stickem-container">
        <div class="content">
            <p>sample text2</p>
        </div>

        <div class="aside stickem">
            <h2>Heading2</h2>
            <p>sample text2</p>
        </div>
    </div>

    <!-- 以下略 -->
</div>

以下のCSSも記述しておきます。

.stickem-container {
    position: relative;
}

.stickit {
    margin-left: 660px;
    position: fixed;
    top: 0;
}

.stickit-end {
    bottom: 0;
    position: absolute;
    right: 0;
}

オプションもいくつかあるので詳しくは公式サイトで確認することができます。

関連記事

  1. Ziehharmonika

    JavaScript

    かっこいいアコーディオンを実装できる軽量のjQueryプラグイン「Ziehharmonika」

    アニメーションがとてもクールでかっこいいアコーディオンを実装することが…

  2. TabbedContent
  3. quick-select

    JavaScript

    素早く簡単に選択できるセレクトボックス「quick-select」

    quick-selectは素早く簡単に選択可能なセレクトボックスを実装…

  4. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでオブジェクトの型を取得して判定などをしたい場合はjQuery.type()を使う

    jQuery.type(obj)を使えばオブジェクトの型を知ることがで…

  5. Solution for Long Drop Down Items

    JavaScript

    長いメニューもスクロールで表示できる「Solution for Long Drop Down Ite…

    長いドロップダウンメニューでもスクロール表示してくれるjQueryを活…

  6. Chariot

    JavaScript

    Webページ内でステップごとのガイドツアーを実装できる「Chariot」

    ChariotはWebページ内でのガイドツアーを実装することができるJ…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. cheero Stream 10000mAh
  2. BOSE HOME SPEAKER 300
  3. RP-PC112
  4. SRS-XB402M
  5. Lite LR30

アーカイブ

PAGE TOP