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. jQuery Magnify

    JavaScript

    シンプルで軽量なズーム機能を実装できる「jQuery Magnify」

    jQuery Magnifyはシンプルで軽量なズーム機能を実装すること…

  2. EasyZoom

    JavaScript

    タッチ対応で画像拡大やパンもできるjQueryプラグイン「EasyZoom」

    EasyZoomはタッチにも対応したモバイルフレンドリーな、画像拡大や…

  3. Bootstrap Mobile FullScreen Modal
  4. ajSlider

    JavaScript

    シンプルでさりげないアニメーションが素敵なスライドショー実装「ajSlider」

    ajSliderはシンプルなスライドショーを実装することができるjQu…

  5. jQuery Flat Shadow

    JavaScript

    フラットデザインに影をつけてくれるjQueryプラグイン「jQuery Flat Shadow」

    フラットデザインのUIに影(シャドウ)をつけてくれるjQueryプラグ…

  6. JavaScript

    ホバーすると中心から円形メニューが表示される「jQuery Wheel Menu」

    ホバーするとその地点を中心にして円形メニューが表示されるプラグイン「j…

コメント

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

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

最近の記事

  1. mill オイルヒーター
  2. Anker PowerWave 10 Pad & Stand セット

アーカイブ

PAGE TOP