sticky-items

JavaScript

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

sticky-itemsは指定したHTML要素をWebページの上部に付箋のように固定して表示させておくことができるjQueryプラグインです。スクロールダウンしても特定の要素を表示しておきたいというときに便利ですね。

sticky-items

デモ

デモでは下へスクロールダウンしていくと「MAKE THIS HEADING STICKY!」と書かれた要素が画面上部に固定されます。

一般的にはスクロールダウンすることで見えなくなっていきますが、特定の要素だけユーザーに見えるようにしたい場合に役立つプラグインです。

また、デモはレスポンシブにも対応しているので、スマホからでも見やすいのがいいですね。試しにiPhoneで確認してみたところ、スクロールダウンしてもしっかり画面上部に固定されていました。

マークアップや使い方がとてもシンプルでわかりやすいほか、top、left、background、originalWidth、layer、parentStylesなどといったオプションも用意されているので、好みにあわせたカスタマイズをしたい人にもピッタリです。

スクロールダウンしても特定の要素だけを表示させる機能を実装したいという人は、ぜひチェックしてみてはいかがでしょうか?

sticky-items

responsive-flip-pricing-tableレスポンシブでフリップによる価格表示の切り替えができる「Responsive Flip Pricing Table」前のページ

シンプルで軽量なドロップダウンメニューを実装できる「jQuery Pretty Dropdowns」次のページjQuery Pretty Dropdowns

関連記事

  1. JavaScript

    レスポンシブでカスタマイズ性に優れたカルーセルを実装できるjQueryプラグイン「slick」

    slickというjQueryプラグインを使えば、レスポンシブでカスタマ…

  2. flubber

    JavaScript

    滑らかなシェイプアニメーションを実装できる「flubber」

    flubberは、滑らかな2Dによるシェイプアニメーションを実装するこ…

  3. formBuilder

    JavaScript

    ドラッグ&ドロップでフォームを手軽につくれる「formBuilder」

    formBuilderはドラッグ&ドロップでフォームを手軽につくること…

  4. JavaScript

    文章の段落にコメントできるjQueryプラグイン「SideComments.js」

    おもしろそうだったのでメモがてらご紹介。SideComments.js…

  5. Motion Blur Effect with SVG

    JavaScript

    ブラーエフェクトを効果的に取り入れる「Motion Blur Effect with SVG」

    Webページ内でブラーエフェクトを効果的に取り入れることができる「Mo…

  6. no-image

    JavaScript

    オシャレなスクロールエフェクトを実装できる「jQuery Smoove」

    jQuery Smooveは、オシャレなスクロールエフェクトを実装する…

最近の記事

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

アーカイブ

PAGE TOP