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. スマトラ
  2. さくらドーナツ
  3. 紙のコーヒーフィルター
  4. PS5とFF7リメイクと鉄拳8
PAGE TOP