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. jQuery Slideout Menu

    JavaScript

    スライドしてメニュー表示できるjQueryプラグイン「jQuery Slideout Menu」

    jQuery Slideout Menuはメニューをスライドして表示さ…

  2. MediumLightbox

    JavaScript

    Mediumライクな画像ズームを実装できる「MediumLightbox」

    シンプルでエレガントな画像ズーム機能をwebサイトに実装できる「Med…

  3. Letter by Letter JS

    JavaScript

    美しいフェードでテキストが徐々に表示されていく「Letter by Letter JS」

    Letter by Letter JSは美しいフェードでテキストを徐々…

  4. JavaScript

    スマホやタブレットでのスワイプに対応したモバイルにも最適なjQueryスライダー「Swiper」

    とてもよさそうだったのでメモしときます。スワイプで切り替えることができ…

  5. pagePiling.js

    JavaScript

    垂直にスライドするようなスクロールを実装できるjQueryプラグイン「pagePiling.js」

    pagePiling.jsは垂直にスライドするようなスクロール機能を実…

最近の記事

  1. 甘柿
  2. 冬用のふとん
  3. 田沢湖
PAGE TOP