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. Slideme

    JavaScript

    スライドでコンテンツを魅せることができるjQueryプラグイン「Slideme」

    SlidemeというjQueryプラグインを使えばコンテンツをスライド…

  2. Shuffle Images

    JavaScript

    画像をシャッフルすることができるjQueryプラグイン「Shuffle Images」

    Shuffle ImagesというjQueryプラグインを使えば、画像…

  3. no-image

    JavaScript

    シンプルでベーシックなJavaScriptによるlightbox実装「halkaBox.js」

    halkaBox.jsは、シンプルでベーシックなJavaScriptに…

  4. no-image
  5. jQuery touchSwipe Carousel

最近の記事

  1. ワンタッチ着脱フィルターキット
  2. Soundcore Ace A1
  3. cheero USB-C PD Charger 60W
  4. DY-S01

アーカイブ

PAGE TOP