CSSだけで追従表現ができる『position: sticky』で３つの表現

はる

CSSの『position: sticky』で一部分を追従する表現が簡単にできるので、その紹介をします。

JavaScriptを使わなくても追従表現ができる

.wrap {
  position: relative;
}

.inner {
  position: sticky;
  top: 0; // 上が起点の場合
}

追従させる条件が細かい追従表現は、
JavaScriptでゴリゴリと処理を自分で記述したり、
JavaScriptのライブラリの ScrollMagic を使ったりしますが、
単純な追従表現は、CSSの position: sticky で簡単に表現できます。

今回は『position: sticky』を使った例を紹介したいと思います。

IE11などの一部ブラウザは使用できません。

flexboxと組み合わせることで、２カラムのレイアウトにしたサイドエリアを追従にせっていすることができる。

サンプルコードの場合、少しテクニックを使っており『display: flex』と一緒に『align-items: flex-end』をしてサイドエリアを下側を起点に追従させています。

テーブルの thead タグだけを追従が可能させることで、何の項目か見やすくすることができます。

テーブルの thead追従の様に見出しだけを追従することで、今何のセクションの見出しかわかりやすいデザインにすることもできます。

どこかの商品ランキングサイトで、『第○位 – 商品名 – 』の見出しが追従されていてみやすいサイトなど見たことあります。