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

関連記事

  1. Chocolat

    JavaScript

    レスポンシブ対応のシンプルなLightbox風のjQueryプラグイン「Chocolat」

    Chocolatはレスポンシブに対応したシンプルでスタイリッシュなLi…

  2. no-image

    JavaScript

    軽量・高速でレスポンシブ対応のjQueryスライダー「partialViewSlider」

    partialViewSliderは左右にスライドする軽量・高速でレス…

  3. ScalableLightbox

    JavaScript

    ミニマルでレスポンシブに対応したLightbox風のjQueryプラグイン「ScalableLigh…

    ScalableLightboxはミニマルなデザインでレスポンシブに対…

  4. Optiscroll

    JavaScript

    縦横に対応したカスタマイズ性に優れたモダンなスクロールバー「Optiscroll」

    Optiscrollは、軽量で高度に最適化されたカスタマイズ性に優れた…

  5. TOAST UI Chart

    JavaScript

    多彩なチャートを描画できる「TOAST UI Chart」

    TOAST UI Chartは多彩なチャートをWebページに描画できる…

  6. Philter

    JavaScript

    CSSのフィルターをコントロールできるjQueryプラグイン「Philter」

    PhilterはCSSのフィルターを簡単にコントロールすることができる…

最近の記事

  1. 梅しば
  2. BM-IBCDH13RD
  3. 雪
  4. ホットのドリップ
  5. めんたいこ&チーズ味 海老せんべい

アーカイブ

PAGE TOP