5月更新・前月(4月)の人気記事トップ10 05/08/2024
- ( 01 – ) 【Mac】macOSをHigh SierraからMontereyにアップグレード
- ( 04 ↑) 【Labs】position:absoluteとwidth:100%を指定すると横幅の設定がうまくいかない場合の対処方法について
- ( 07 ↑) 【Mac】Safariでソースコードを見る方法
- ( 05 ↑) 【jQuery】入門2. jQueryをHTMLに組み込む
- ( 08 ↑) 【Mac】横画面で撮影した動画をYouTubeショート用にMacのiMovieで縦画面に編集する方法
- ( 03 ↓) 【iPhone / iPad】iPhoneのツイッターアプリでユーザー名をコピーする方法
- ( 09 ↑) 【jQuery】入門7. jQueryで新しいWindowを開く
- (圏外↑) 【Labs】CSSだけでドロップダウンメニュー
- (圏外↑) 【Labs】PHPのエラー表示をなくす方法
- ( 06 ↓) 【jQuery】入門11. switch文による条件分岐
【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】グローバルナビをトップに固定するスティッキーナビ