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;
}

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

Lightroomのクイック現像Lightroomのクイック現像を使えば複数の画像を同時に一括補正することができる前のページ

「PageSpeed Insights」のChrome拡張機能があったのでインストールしてみた次のページChrome拡張機能「PageSpeed Insights」

関連記事

  1. jQuery Floating Social Share
  2. Foxholder
  3. preload

    JavaScript

    プリロードやローディング画面を実装できるjQueryプラグイン「preload」

    preloadは、その名のとおり「プリロード」やローディング中の画面を…

  4. JavaScript

    画像にマウスオーバーするとズームして綺麗にエフェクトがかかるjQueryプラグイン「Swish」

    画像にマウスオーバーをするとズームして綺麗なオーバーレイのエフェクトが…

  5. StellarNav.js

    JavaScript

    レスポンシブで多階層に対応したドロップダウンメニュー「StellarNav.js」

    StellarNav.jsはjQueryによるレスポンシブで多階層に対…

  6. Sliding Panels Template

コメント

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

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

最近の記事

  1. サーモンアボカドサラダラップとドリップ
  2. 猿田彦フレンチ
  3. Zarigani Curry 挽肉のカレー ゴーダチーズとピクルスを添えて
  4. ビジネスホテル
  5. ドリップコーヒー

アーカイブ

PAGE TOP