Sticky Multi Header Scroll

JavaScript

スクロールで複数のコンテンツの見出しをスタックしていける「Sticky Multi Header Scroll」

Sticky Multi Header Scrollは、スクロールすることで複数のコンテンツにある見出し(ヘッダー)をスタックしていくことができるjQueryプラグインです。ファイル容量も軽量でクロスブラウザとの互換性も備えているのが特徴です。

マルチデバイスもサポート

デモ

デモでは、stickyHeader 001、stickHeader 002、stickyHeader 003……と複数の見出しとそれに対応したコンテンツが開かれた状態で表示されています。

下へスクロールしていくと、上から順番に各見出しに対応しているコンテンツが隠れていき、見出しだけがスタックされていきます。コンテンツは非表示になりますが、見出しが残っているので見たいコンテンツの見出しの右側に設置された「Link」をクリックするとその場所までスクロールされ、目的のコンテンツが表示される仕組みになっています。

この機能があれば、縦長のページなんかで、下までスクロールした時に上にある目的の場所までスクロールしてわざわざ探す必要がなくなるのでとても便利ですね。スタックされた見出しがナビゲーション代わりの役割も果たしてくれるので、とても効率的です。

使い方もわかりやすく、オプションもいくつか用意されているのでちょっとしたカスタマイズもできますよ。主なオプションは、scrollAnimation、height、widthです。

また、IE9+、Chrome、Firefox、Safari、Operaといったクロスブラウザへの互換性も備えているほか、マルチデバイス(iPhoneやiPadなどのモバイルデバイスにも対応)をサポートしているのも特徴の1つです。

Sticky Multi Header Scroll

PIGNOSE-ParallaxSliderパララックス効果を備えたスライダーを実装できる「PIGNOSE-ParallaxSlider」前のページ

カラフルなアニメーションを実装できる「chalk-animation」次のページchalk-animation

関連記事

  1. Jquery Tab Plugin

    JavaScript

    シンプルで見やすいタブパネルを実装できる「Jquery Tab Plugin」

    Jquery Tab Pluginはシンプルで見やすく、そして操作しや…

  2. StellarNav.js

    JavaScript

    レスポンシブで多階層に対応したドロップダウンメニュー「StellarNav.js」

    StellarNav.jsはjQueryによるレスポンシブで多階層に対…

  3. Simple Image Panner and Zoomer
  4. NO IMAGE

    JavaScript

    フレキシブルで軽量なJavaScriptモーダル実装「Vanilla Modal」

    Vanilla Modalは、フレキシブルでファイル容量も軽量なCSS…

  5. TextTailor.js

    JavaScript

    コンテナ内のフォントサイズを自動リサイズしてくれるjQueryプラグイン「TextTailor.js…

    TextTailor.jsはブラウザ幅に合わせてコンテナ内のテキストの…

  6. jQueryTween

    JavaScript

    軽量で軽快なアニメーションをするjQueryプラグイン「jQueryTween」

    jQueryTweenは軽量で軽快なアニメーションを実装することができ…

最近の記事

  1. 長十郎
  2. COMOLI シルクネルシャツ
  3. WiMAX
  4. 甘柿
PAGE TOP