FixedContent.js

JavaScript

モバイルフレンドリーなコンテンツ固定のjQueryプラグイン「FixedContent.js」

FixedContent.jsはスクロールしてもコンテンツを固定してくれるjQueryプラグインです。モバイルフレンドリーな設計になっており、ブラウザ幅の最小値を設定することでスマホ閲覧時には無効にしたりといったことも可能です。

[ads_center]

FixedContent.jsの使い方

以下はFixedContent.jsのデモになります。

FixedContent.jsのデモ

デモ

使い方はとても簡単です。jQueryとプラグインを読み込んだ状態で、このように固定したいコンテンツをマークアップしていきます。

<div class="js_fixedcontent">
    <!-- コンテンツ -->
</div>

そしてプラグインをセットすればOKです。下記のオプションの値はすべてデフォルトになっています。

$(".js_fixedcontent").fixedcontent({
    marginTop: 24,
    minWidth: 767,
    zIndex: 500
});

marginTopやminWidthなどを指定することができます。minWidthで指定された幅よりも小さかった場合はプラグインが無効になります。

PCからの閲覧時にはコンテンツを固定して、モバイル時には無効にするというようにキッパリと割り切っている辺りがいいですね。

FixedContent.js

Select.jsセレクトボックスをオシャレにスタイリングしてくれるJS・CSSライブラリ「Select.js」前のページ

タッチジェスチャーにも対応したイメージギャラリー・PhotoSwipe次のページPhotoSwipe

関連記事

  1. jquery-calendar

    JavaScript

    レスポンシブ対応でスケジュール管理もできるカレンダー「jquery-calendar」

    jquery-calendarはレスポンシブに対応したスケジュール管理…

  2. no-image

    JavaScript

    多彩なコンテンツ表示やカスタマイズ性を有する「LC Lightbox」

    LC Lightboxは画像や動画など多彩なコンテンツ表示ができたり高…

  3. qpScroll
  4. StellarNav.js

    JavaScript

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

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

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

    JavaScript

    jQueryで現在のウィンドウサイズの取得と判定をして処理を変えるやり方

    jQueryで現在のウィンドウサイズの取得と判定をして処理を変えるやり…

最近の記事

  1. Anker PowerExpand Direct 6-in-1 USB-C PDメディアハブ
  2. ペットボトルホルスター

アーカイブ

PAGE TOP