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

関連記事

  1. JQuery Portfolio
  2. Segment

    JavaScript

    SVG pathをアニメーションさせる軽量のスクリプト「Segment」

    SegmentはSVG pathをアニメーションさせる軽量のスクリプト…

  3. NO IMAGE

    JavaScript

    テキストコンテンツをページ分割(ページネーション)できる「jPaginate」

    jPaginateはWebページ内のテキストコンテンツをページ分割(ペ…

  4. stacky

    JavaScript

    スライドダウン・スライドアップしてコンテンツを整理できるjQueryプラグイン「stacky」

    stackyというjQueryプラグインを使えばコンテンツをスライドダ…

  5. Linear Slider

    JavaScript

    シンプルな機能で使いやすいjQueryによる水平スライダー「Linear Slider」

    Linear Sliderはシンプルな機能性による水平スライダーを実装…

最近の記事

  1. Anker PowerPort Atom PD 4
  2. USB-2H401BKN
  3. Dyson Pure Cool Me
  4. ルック セレクション

アーカイブ

PAGE TOP