個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

スクロールした位置についてくるStickyプラグイン15

スクロールした位置についてくるStickyプラグイン15

スクロールした位置についてくる要素を実装するjQueryプラグイン「Stickyプラグイン」をまとめてご紹介します。
スクロールすると、サイドバーがくっついてきたり、メニューがついてくるサイトが一般的になっています。
こうした効果はサイト訪問者にとって大変効果的です。
これを実装しない手はありません。
これらを手軽に実装するため便利なのが、jQueryプラグインの「Stickyプラグイン」です。
早速、15個ご紹介します。

Waypoints

スクロールした位置についてくるStickyプラグイン15
スクロールイベントを制御できるプラグイン。
要素を固定できるのはもちろん、指定位置にきたときに要素を表示させるなど、いろいろとできるのが特徴のプラグインです。
infinityスクロールなども実装できます。
MITライセンス
WaypointsDemo

Sticky Kit

スクロールした位置についてくるStickyプラグイン15
スクロールに追従する要素を簡単に作成できるプラグイン。
MITライセンス
Sticky KitDemo

StickyJS

スクロールした位置についてくるStickyプラグイン15
スクロールに追従する要素を作成する際に便利なプラグイン。
MITライセンス
StickyJS

HeadRoom

スクロールした位置についてくるStickyプラグイン15
ヘッダ要素をスクロールに合わせて表示・非表示させるプラグイン。
MITライセンス
HeadRoom

MakefixedJS

スクロールした位置についてくるStickyプラグイン15
スクロールに追従する要素をつくれるプラグイン。
GPLライセンス
MakefixedJSDemo

MidnightJS

スクロールした位置についてくるStickyプラグイン15
固定させる要素をスクロール位置によって変更できるプラグイン。
MITライセンス
MidnightJS

ScrollMagic

スクロールした位置についてくるStickyプラグイン15
スクロールした際にさまざまなエフェクトを実装できるプラグイン。
MIT & GPLライセンス
ScrollMagic

onScreen

スクロールした位置についてくるStickyプラグイン15
表示される際にさまざまなエフェクトを実装できるプラグイン。
画像を遅れて表示させるlazy loadなども実装できます。
MITライセンス
onScreenDEMO

jQuery Pin

スクロールした位置についてくるStickyプラグイン15
スクロールに追従する要素をつくれるプラグイン。
BSDライセンス
jQuery Pin

Sticky Float

スクロールした位置についてくるStickyプラグイン15
スクロール追従型要素を作成できるプラグイン。
Sticky FloatDemo

Zebra Pin

スクロールした位置についてくるStickyプラグイン15
要素をピンで止めたように固定できるプラグイン。
GPLライセンス
Zebra PinDemo

HC-Sticky

スクロール時に特定の要素を固定させるプラグイン。
MITライセンス
HC-Sticky

Sticky Mojo

スクロールした位置についてくるStickyプラグイン15
スクロール時に要素を固定できるプラグイン。
MITライセンス
Sticky Mojo

Sticky Navbar

スクロールした位置についてくるStickyプラグイン15
ある位置までスクロールすると、メニューが上部に固定されるプラグイン。
MITライセンス
Sticky Navbar

StickyStack

スクロールした位置についてくるStickyプラグイン15
パララックス効果のように、ページ全体を固定し、次の要素を下から読み込むようにするプラグイン。
StickyStackDemo

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

  • 0
  • 0
  • 0
  • 4

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

この記事を読んだ人はこんな記事も読んでいます

CSSアニメーションを簡単・思いのままに作成できてしまう「Bounce.js」

CSSアニメーションを簡単・思いのままに作成できてしまう「Bounce.js」

最近のサイトではCSSアニメーションを使って、ユーザーに効果的な見せ方をしているサイトも増えてきまし

記事を読む

Gmailの送信メールを一定期間で自己消滅させる機能拡張「Dmail」

Gmailの送信メールを一定期間で自己消滅させる機能拡張「Dmail」

Gmailの送信メールを一定期間で自己消滅させる機能拡張「Dmail」をご紹介します。 Gmail

記事を読む

セキュリティー/プライバシーにすぐれたブラウザ6選

IE、Chrome、Safari、Firefoxといったメジャーブラウザ以外にもたくさんのブラウザが

記事を読む

波打つようなクリックエフェクトを実装できる「Waves」

今回はクリックしたときに、静かな湖面を指で触れて波打つようなエフェクトを実装できるライブラリーをご紹

記事を読む

ナビゲーションだけが90以上!ナビゲーションメニューのプラグインやチュートリアルのコレクションサイト「NavNav」

ナビゲーションだけが90以上!ナビゲーションメニューのプラグインやチュートリアルのコレクションサイト「NavNav」

ナビゲーションメニューのプラグインやデモ、チュートリアルが90以上コレクションされたサイトをご紹介し

記事を読む

これは簡単!ポリゴン画像生成ジェネレーター「Trianglify Generator」

これは簡単!ポリゴン画像生成ジェネレーター「Trianglify Generator」

簡単・無料で利用できるこポリゴン画像生成ジェネレーターをご紹介。 背景画像などによく使われているポ

記事を読む

2014年登場のCSSツール・サービスはこれを!2014ベストCSSツール・サービス50

2014年登場のCSSツール・サービスはこれ!2014ベストCSSツール・サービス50

2014年に登場したCSS関係のツール、サービスをご紹介します。 CSS3の登場で、CSS関連のツ

記事を読む

ブラウザがあればOK!コードを即実行・確認できるツール

ブラウザでプログラミング!ブラウザでコードが書けて実行・確認できるサービス14

ブラウザでコードが書けて実行・確認できるサービスをご紹介します。 サイトを実際に公開する前にテスト

記事を読む

iPhoneもMacも簡単OK!CSSだけであなただけのAppleデバイスを描ける無料ジェネレーター「Pure CSS Apple Device Generator」

iPhoneもMacも簡単OK!CSSだけであなただけのAppleデバイスを描ける無料ジェネレーター「Pure CSS Apple Device Generator」

CSSだけでAppleデバイスを描ける無料ジェネレーター「Pure CSS Apple Device

記事を読む

JSを使わずにCSSだけで簡単にシンプルなパララックス効果をつける方法

JSを使わずにCSSだけで簡単にシンプルなパララックス効果をつけられる方法をご紹介します。 パララ

記事を読む