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

関連記事

  1. EZ Plus

    JavaScript

    タッチにも対応した画像ズーム機能を実装できるjQueryプラグイン「EZ Plus」

    EZ Plusはタッチにも対応した画像ズーム機能を実装することができる…

  2. Responsive Elements
  3. JavaScript

    シンプルでスワイプにも対応したスライダーならSimple jQuery sliderがオススメ

    シンプルでスマホのスワイプにも対応したスライダーを実装したいって時にオ…

  4. no-image

    JavaScript

    スワイプでのスライドもできるシンプルなスライダー「jquery-slide」

    jquery-slideはスワイプでのスライドにも対応したシンプルなス…

  5. Prism Effect Slider

    JavaScript

    プリズム効果を実装することができるスライダー「Prism Effect Slider」

    おもしろいスライダーがあったのでご紹介します。Prism Effect…

  6. S-Pagination

    JavaScript

    スライダー付きのページネーションを実装できる「S-Pagination」

    S-Paginationはスライダー付きのページネーションを実装できる…

最近の記事

  1. Waterlogue
  2. macOS Mojaveのダークモード
  3. Olli
  4. 単語帳メーカー(Flashcard Maker App)

Facebookページ

PAGE TOP