素敵な position: sticky;

Category : CSS

誰かがこのタイトルで書くだろうと思っていたけど誰も書かないのでセルフ実行。

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

Sticky Positioning

サンプルをダウンロード

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 でのフォールバック方法なんかも載っています。

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

Leave a Reply