個人的に役立ったデザイン素材や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
  • 0

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

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

WEBサイトの背景に幾何学的なポリゴンアニメーションを簡単に実装できる「particles.js」

WEBサイトの背景に幾何学的なポリゴンアニメーションを簡単に実装できる「particles.js」

流行っているのかどうか定かではありませんが、海外のサイトなどで最近よく見かける幾何学的なポリゴンアニ

記事を読む

コンバージョン率アップ!デザインに優れた無料のHTML+CSSプライステーブル/価格表27

コンバージョン率アップ!デザインに優れた無料のHTML+CSSプライステーブル/価格表25

海外サイトなどではよく目にするプライステーブル/価格表。 この価格表は、いうまでもなく、コンバージ

記事を読む

40以上のホバーエフェクトをCSSだけで実装できる「Hover.Css」

40以上のホバーエフェクトをCSSだけで実装できる「Hover.Css」

最近はいろいろなサイトで魅力的なホバーエフェクトを目にする機会が増えました。 今回は、そんなホバー

記事を読む

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

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

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

記事を読む

SVGベースのオリジナルなシームレスパターンを作ってダウンロードできる「Plain Pattern」

SVGベースのオリジナルなシームレスパターンを作ってダウンロードできる「Plain Pattern」

今回ご紹介するのはSVGベースのシームレスパターンを簡単につくれて、PNG形式でダウンロードできてし

記事を読む

プロジェクトにすぐ使えるハイクオリティーなHTML/CSS無料テーマテンプレート集100

プロジェクトにすぐ使えるハイクオリティーなHTML/CSS無料テーマテンプレート集100

HTML/CSS無料テーマテンプレートでハイクオリティーなものがありましたのでご紹介します。 これ

記事を読む

HTML5ビデオにも対応できる無料動画変換ツール/コンバーター10

HTML5ビデオを利用したサイトも見かけるようになってきました。 今後はHTML5ビデオを利用する

記事を読む

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

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

記事を読む

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

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

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

記事を読む

レスポンシブ対応済みサイトがApple Watchに対応しているかどうかがわかる「the ultimate responsive test」

レスポンシブ対応済みサイトがApple Watchに対応しているかどうかがわかる「the ultimate responsive test」

Apple Watchがいよいよ発売になります。 ところで、あなたのレスポンシブ対応済みのサイトは

記事を読む