素敵なposition: sticky

公開：2012年09月05日 14:28

Webkitにposition: stickyが実装されましたね。
というわけで試してみましょう。
現在、Chrome 23.0.1247.0以降（今はCanaryのみ）とWebkit Nightlyで見ることができます。

HTMLとCSS は次のようになっています。

<div class="container">
  <div class="column-left">
    <section>
      <h2>Lorem Ipsum</h2>
      <p>
        Lorem ipsum dolor sit amet...
      </p>
    </section>
    <section>
      <h2>Cupcake Ipsum</h2>
      <p>
        Cupcake ipsum dolor sit amet tiramisu...
      </p>
      ...
    </section>
    ...
  </div>
  <div class="column-right">
    <h2>Lorem Ipsum</h2>
    <p>
      Lorem ipsum dolor sit amet...
    </p>
    <h2>Cupcake Ipsum</h2>
    <p>
      Cupcake ipsum dolor sit amet tiramisu...
    </p>
    ...
  </div>
</div>

h2 {
  margin: 4rem 0 2rem;
  font-size: 2rem;
  line-height: 3rem;
}

.container h2 {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.column-left h2 {
  background: #faa;
}

.column-right h2 {
  background: #aaf;
  z-index: 1;
}

.column-right h2:nth-of-type(2) {
  top: 1.5rem;
}

.column-right h2:nth-of-type(3) {
  top: 3rem;
}

.column-right h2:nth-of-type(4) {
  top: 4.5rem;
  z-index: 0;
}

position: stickyが指定された要素は、その親要素にposition: relativeが指定されており、また自身はposition: fixedが指定されているかのように振る舞います。
ときどき見かけれるスクロールすると途中から固定配置になるあれと似ています。

先ほどのサンプルの赤い見出しと青い見出しの違いは、赤い方は見出しの親がsection要素、青い方は見出しの親がdiv要素（赤い方で言うとsectionの親）になります。
親要素内でのみ途中から固定配置になるので、赤い方はsection内でのみ、その挙動をします。
青い方は同階層にも見出しがあるので、固定配置の挙動になったら指定された位置で重なっていきます。サンプルで少しずつ位置をずらしているのはそれを分かりやすくするためです。
もちろん、z-indexが指定されていればその指定に従って重なります。

また、サンプルを見ても分かる通り、上下マージンは固定される前と親要素の最後に来たときに適用されています。

これが使えるようになったら縦に長い表の見出し（たとえばテレビ番組表のチャンネル）などを使いやすくできますね。
今でもJavaScriptを使えばできますが、作りやすくなると思います。

最後に解説ページへのリンクを載せておきます。
JavaScriptでのフォールバック方法なんかも載っています。

Stick your landings! position: sticky lands in WebKit - HTML5Rocks Updates

そうそう、これはWebkitの独自実装で、CSSの仕様にはありません。
現時点では提案中となっています。
このまま独自実装で終わるか、仕様に入るかはちょっと気になるところです。