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

    JavaScript

    ミニマルで超軽量・シンプルなタブを実装できるjQueryプラグイン「CardTabs」

    CardTabsは超軽量でシンプルなタブを実装できるjQueryプラグ…

  2. jQlouds

    JavaScript

    ふわふわと流れるアニメーション付きの雲を実装できるjQueryプラグイン「jQlouds」

    jQloudsというjQueryプラグインを使えば、ふわふわした雲を実…

  3. TV Credits

    JavaScript

    垂直・水平方向に滑らかに流れていくティッカーを実装できるjQueryプラグイン「TV Credits…

    TV Creditsは垂直方向や水平方向に流れていくティッカーを実装す…

  4. jquery.square.js

    JavaScript

    スクエアなグリッドレイアウトを実装できる「jquery.square.js」

    jquery.square.jsは、スクエアなグリッドレイアウトを実装…

  5. StickyStack.js

    JavaScript

    パネルにスタッキング効果を実装できるjQueryプラグイン「StickyStack.js」

    StickyStack.jsはパネルにスタッキング効果を実装することが…

  6. jQuery Timespace

    JavaScript

    四方にドラッグ移動できる水平タイムライン実装「jQuery Timespace」

    jQuery Timespaceは上下左右と四方にドラッグ移動できる水…

最近の記事

  1. 椿屋特製アイス珈琲
  2. 有栖川公園
  3. グーディオ オーガニックチョコレート(ミント)
  4. チキンバターマサラとシュリンプバターマサラ
  5. 恵比寿のダ・ミケーレのピザ

アーカイブ

PAGE TOP