スマートスティッキー要素を作るための15のjQueryプラグイン

サイトを上下にスクロールしたときに、サイト内の特定の要素が位置に固定されて表示されるのが一般的になりました。ナビゲーションメニュー、ヘッダー、またはサイドバー。これにより、ユーザーの位置に関係なく、要素をすぐに利用できるようになります。.

スティッキー要素と呼ばれ、これはCSSを使用するだけで実現できますが、この方法を使用すると、複数のブラウザ間で効果が信頼できません。これが、私たちがJSライブラリとjQueryプラグインのほんの一握りをまとめた理由です。これにより、この特定のUXデザインをほとんど手間をかけずに達成することができます。.

ウェイポイント

ウェイポイントは、ビューポート内の要素の位置に基づいて関数を実行するためのライブラリです。それはその要素を作るショートカット機能が付属しています “ねばねばしている”. スクロール方向をカスタマイズできます - アップ, ダウン, そしてさらに 右 そして 左 - どの要素がビューポート内に固定されるかについて.

依存：なし/ jQuery（オプション）
ライセンス：MITライセンス

スティッキーキット

あり StickyKit, 要素をビューポート内に固定するだけでなく、指定した親要素内にそれらを同時に固定することもできます。このプラグインには、カスタムイベントやトリガーなどの高度な設定もいくつか付属しています.

依存：jQuery
ライセンス：WTFPL

3. StickyJS

StickyJS それはそれが言うことをする使いやすいjQueryスティッキープラグインです。プラグインはそのまま使用できます。まだカスタマイズが必要な場合は、オプション/設定、カスタムメソッド、イベントが付属しています。.

依存：jQuery
ライセンス：MITライセンス

4.ヘッドルーム

スティッキーサイトのヘッダーは貴重な垂直方向のスペースを占めるため、モバイルでサイトを表示するときに違いが生じます。. ヘッドルーム あなたのスティッキーヘッダを賢くするJavaScriptライブラリです。ユーザがページを下にスクロールして上にスクロールすると表示されると、ヘッダは非表示になります。.

依存：なし/ jQuery（オプション）/ Angular（オプション）
ライセンス：MITライセンス

5. MakefixedJS

メークフィックス ユーザーがページをスクロールするときに要素を動的に固定することができます。を呼び出すだけで makeFixed（） あなたが固定したい要素に機能する。実演でそれを見るためにデモをチェックしてください.

依存：jQuery
ライセンス：GPL

6.ミッドナイトJS

深夜あなたが複数のヘッダ/要素を貼り付けて、ドキュメント（DOMツリー）内のそれらの位置に基づいてそれらを切り替えることを可能にします、私が何を意味するか見るためにデモをチェックしてください。加えて、あなたは単にその場で色を変えることができます。 データ真夜中 指定された色の名前を持つ属性.

依存：jQuery
ライセンス：MITライセンス

7. ScrollMagic

ScrollMagic ページスクロール中にインタラクションを追加する高度な機能があります。特定のスクロール位置から要素を固定したり、スクロール位置に基づいてアニメーションを追加したり、さらには素晴らしい視差効果を加えることもできます。デモはこのプラグインが何をすることができるかについてあなたにいくつかの洞察を与えます.

依存：jQuery / Velocity.js
ライセンス：デュアルライセンス（MITとGPL）

8.オンスクリーン

画面上で ウェイポイントに似ています - 要素がブラウザのビューポート内の特定の位置に入る、離れる、または到達するときに関数を実行することを可能にします。.

依存：jQuery
ライセンス：MITライセンス

9. jQueryのピン

jQueryのピン への小さなjQueryプラグインです。 “ピン” または “固定解除” ページをスクロールしたときの位置に要素を追加します。このプラグインの私の最もお気に入りの部分は、特定のビューポート幅でそれを無効にするオプションです.

依存：jQuery
ライセンスBSDライセンス

スティッキーフロート

スティッキーフロート 親に対して相対的に固定位置を要素に与えることができます。提供されているパラメータを使用して値を変更することで、ニーズに応じてスティッキオプションを設定できます。ここでデモを見る.

依存：jQuery
ライセンス： 未定義

11.ゼブラピン

ゼブラピン 任意の要素をコンテナに固定するための軽量プラグインです。このプラグインを使えばあなたが追加することができます “付箋” ナビゲーション、サイドバー、ヘッダーとフッター、またはユーザーが下にスクロールしても表示したいその他の要素と同じように、プロジェクト内の要素に。デモをチェックする.

依存：jQuery
ライセンス：GPLライセンス

HCスティッキ

あり HCスティッキー, そのコンテナ、任意の要素、またはドキュメント自体を参照するスティッキー要素を作成できます。このプラグインはあなたのニーズに合わせて調整できるいくつかのオプションを持っています。.

依存：jQuery
ライセンス：MITライセンス

スティッキーモジョ

スティッキーモジョ 素晴らしい付箋要素を作るための軽量、高速、そして柔軟なjQueryプラグインです。それは現代のブラウザと互換性があり、IEで優雅に劣化します.

依存：jQuery
ライセンス：MITライセンス

スティッキーナビ

下にスクロールしても動かない単一ページのナビゲーションを作成したい場合は、このライブラリを使用してください。.スティッキーナビブラウザウィンドウの上部にナビゲーションを配置し、ページ上の対応するセクションに接続するためのアンカーリンクを強調表示します。 Animate.cssを追加してナビゲーション効果を美しくすることもできます.

依存：jQuery
ライセンス：MITライセンス

15. StickyStack

StickyStack ユーザーが要素をスクロールしてビューポートの一番上に達すると、要素は別の要素と重なります。このライブラリでは、あなたの長いページは積み重ねられたカードに変わります。.

依存：jQuery
ライセンス： 未定義