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. jfMagnify
  2. jQuery Sidebar

    JavaScript

    上下左右からクイックなスライド表示させることができるjQuery Sidebar

    jQuery Sidebarは上下左右からスライド表示させることができ…

  3. No Vacancy

    JavaScript

    ネオンサインのようなエフェクトを実装できるjQueryプラグイン「No Vacancy」

    テキストにネオンサインのようなエフェクトを実装することができるjQue…

  4. Bootstrap Dropdown Hover
  5. jExcel

    JavaScript

    Excelと互換性のあるスプレッドシートを埋め込めるjQueryプラグイン「jExcel」

    jExcelは、ブラウザにExcelと互換性のあるスプレッドシートを埋…

  6. jQuery gantt

    JavaScript

    軽量なガントチャートを実装できるjQueryプラグイン「jQuery gantt」

    jQuery ganttは、軽量でシンプルなガントチャートを実装するこ…

コメント

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

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

最近の記事

  1. SV-S251
  2. スラウェシ トラジャ
  3. 梅
  4. CAR-HLD12BK

アーカイブ

PAGE TOP