iOS風!リストスタイルのヘッダーを実装する「Stacks」

「Stacks」はiOS風のリストスタイルのヘッダーを実装するjQueryプラグインです。見出しが切り替わるごとにヘッダーも切り替わっていくあの機能です。

Stacks

screenshot287

Demoを見ていただければどんな機能か分かるかと思います。縦に長い文章、例えば技術マニュアルなんかに使えそうですね。以下に画像でどのような機能かご紹介します。まずはスクロールが一番上の状態です。

screenshot288

 

スクロールしていきます。”What is it?”の部分までスクロールすると、その見出し箇所がヘッダーに切り替わります。見出しの”border-bottom”が”box-shadow”に切り替わり少し浮いてるようにアニメーションします。

screenshot289

 

“How it works”までスクロールするとヘッダーが切り替わります。このような機能があれば見出しから見出しまでが長い文章でも、どこを読んでいるのかの手助けになりますね。

screenshot290

 

 

それでは「Stacks」の実装方法をご紹介します。まずはjQuery含む外部ファイルを読み込みます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="jquery.stacks.js"></script>

 

HTMLはこのようにマークアップします。h1タグである必要はありません。後述するJavaScriptでタグを指定しますが、今回はh1タグを使用しました。スクロールボリュームを出すためにbrタグを多用しました。

<div class="contentbox">
  <h1>見出し1</h1>
  <p>testtesttesttest</p>
  <br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br>
</div>
<div class="contentbox">
  <h1>見出し2</h1>
  <p>testtesttesttest</p>
  <br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br>
</div>
<div class="contentbox">
  <h1>見出し3</h1>
  <p>testtesttesttest</p>
  <br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br>
</div>

 

CSSはこのように指定します。

.fixed{
  position: fixed;
  top:20px;
  z-index:500;
}
.absolute{
  position: absolute;
  width: 100%;
  margin-bottom:0;
  z-index:501;
  bottom: -16px;
  box-sizing:border-box;
}
.contentbox{
  position: relative;
}

 

JavaScriptはこのように実装します。optionの説明は上記リンク先に記載されています。

$(function(){
  $('body').stacks({
    body: '.contentbox',
    title: 'h1',
    margin: 16,
    offset: 20
  })
})

 

するとこのように作ることが出来ました。

screenshot292

 

スクロールすると、見出し2に切り替わります。

screenshot293

 

少し動作が不安定なのが気になりますが、まぁ使えないことはありません。参考にどうぞ。

 

Home > JavaScript > iOS風!リストスタイルのヘッダーを実装する「Stacks」

Return to page top