個人的に役立ったデザイン素材や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アソシエイト・プログラムの参加者です。

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

商用無料で高画質画像を配布するUnsplashがプレースホルダー画像サービスを開始

便利すぎる!商用無料で高画質画像を配布するUnsplashがプレースホルダー画像生成サービスを開始

商用無料で高画質画像を配布するUnsplashがプレースホルダー画像生成サービスを開始しました。

記事を読む

シンプルなのに効果的!CSS3トランジションを使ったマウスオーバーアニメーション11

シンプルなのに効果的!CSS3トランジションを使ったマウスオーバーアニメーション11

CSS3を使えば、シンプルなコードなのに、ユーザーを「おっ!」と思わせる楽しい動きを簡単に実装できて

記事を読む

無料のファイル転送ツールの決定版?容量無制限・件数無制限・ハイスピードの「Infinit」

ファイルを転送するとき、どんなツールを利用していますか? DropBoxやFireStorageな

記事を読む

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

記事を読む

無料で利用できるhtml5プレイヤー(jQueryプレイヤー)14(2013)

html5のお陰で、プラグインなしでビデオ、音楽を導入できるようになりました。 iPhoneは今後

記事を読む

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

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

記事を読む

超簡単!CSSで上下左右センターにする方法

超簡単!CSSで上下左右センターにする方法

超簡単ですぐ実践できるCSSで上下左右センターにする方法をご紹介。 display:flexを使っ

記事を読む

リボン風の見出しをCSS3だけで実装する方法

リボン風の見出しをCSS3だけで実装する方法

見出しでリボン風の装飾をCSS3だけで実装する方法をご紹介します。 利用するのはboderプロパテ

記事を読む

信じられないほど美しい!CSSだけで絶滅危惧種30を表現した「In Pieces」

信じられないほど美しい!CSSだけで絶滅危惧種30を表現した「In Pieces」

CSSだけで表現されているのに、信じられないほど美しいサイト「In Pieces」をご紹介します。

記事を読む

twitterでのキーワードのひろがりを調べられるツール「twimp」

twitterでのキーワードのひろがりを調べられるツール「twimp」

twitterでのキーワードのひろがりを調べられるツール「twimp」をご紹介します。 作成者した

記事を読む