【Labs】スクロールしても要素が固定するCSSだけでスティッキー要素
こんにちは(・∀・)
今回も「CSSだけで...」シリーズです。スクロールしても要素が固定して表示され続けます。
スクロールしても要素が固定するCSSだけでスティッキー要素
今回のサンプルもCSSだけで実現できるようになりました。
sample
それではサンプルをご覧ください。
使用するCSSです。
position:stickyと要素を固定する位置を指定します。親要素が終了位置まで移動すると固定は解除されます。
CSS
h2 {
position: sticky;
top: 0;
}
ヘッダーで固定する要素はH3です。
HTML
<div>
<h3>h3</h3>
</div>
よろしければぜひお試しください。
ただし、IEは非対応です。
関連リンク
【Labs】ヘッダーをトップに固定してスクロールでアニメーション
【Labs】スクロールしても要素が固定するスティッキーサイドバー
【Labs】グローバルナビをトップに固定するスティッキーナビ+ドロップダウンメニュー
【Labs】グローバルナビをトップに固定するスティッキーナビ