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. sticky-items

    JavaScript

    HTML要素をページ上部に固定させれるjQueryプラグイン「sticky-items」

    sticky-itemsは指定したHTML要素をWebページの上部に付…

  2. JavaScript

    テキストに炎のようなエフェクトを追加してくれるjQueryプラグイン「jQuery Burn」

    テキストに炎のようなエフェクトを追加してくれるjQueryプラグイン「…

  3. GoogleSheets-HTMLImporter
  4. textwriteout

    JavaScript

    テキストの書き出し・削減ができるjQueryプラグイン「textwriteout」

    textwriteoutは指定したテキストを書き出したり削減したりでき…

  5. Animate Plus

    JavaScript

    CSS、SVGを使った多彩なアニメーションを実装できる「Animate Plus」

    Animate PlusはCSS、SVGを使った多彩なアニメーションを…

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

    JavaScript

    jQueryで$.inArrayを使えば配列の中に指定した値が何番目に入ってるか知ることができる

    jQueryで配列の中に自分が指定した値が何番目にあるか知りたい場合は…

コメント

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

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

最近の記事

  1. サンクラフト ポテトング
  2. iPhone 11 Pro Smart Battery Case(ホワイト)
  3. メイソンピアソン ヘアブラシ
  4. COMOLI ベタシャンCPOシャツ(サックス)

アーカイブ

PAGE TOP