【Labs】スクロールしても要素が固定するCSSだけでスティッキー要素

こんにちは（・∀・）

今回も「CSSだけで...」シリーズです。スクロールしても要素が固定して表示され続けます。

スクロールしても要素が固定するCSSだけでスティッキー要素

今回のサンプルもCSSだけで実現できるようになりました。

sample

それではサンプルをご覧ください。

demo

使用するCSSです。
position:stickyと要素を固定する位置を指定します。親要素が終了位置まで移動すると固定は解除されます。

CSS

h2 {
  position: sticky;
  top: 0;
}

ヘッダーで固定する要素はH3です。

HTML

<div>
<h3>h3</h3>
</div>

よろしければぜひお試しください。
ただし、IEは非対応です。

関連リンク

【Labs】ヘッダーをトップに固定してスクロールでアニメーション
【Labs】スクロールしても要素が固定するスティッキーサイドバー
【Labs】グローバルナビをトップに固定するスティッキーナビ+ドロップダウンメニュー
【Labs】グローバルナビをトップに固定するスティッキーナビ

参考

【第3弾】少しのコードで実装可能な15のCSS小技集