menu
menu

キーワード検索

 

5月更新・前月(4月)の人気記事トップ10 - 05/11/2020

  1. ( 1 - ) 【Mac】Macのユーザー名とアカウント名を変更する
  2. ( 2 - ) 【CSS】CSSだけでドロップダウンメニュー
  3. ( 5 ↑) 【Mac】Safariでソースコードを見る方法
  4. ( 4 - ) 【jQuery】入門2. jQueryをHTMLに組み込む
  5. ( 3 ↓) 【iPhone・iPad】iPhoneのメモリを簡単に解放する方法
  6. ( 7 ↑) 【Mac】Finderにフォルダのフルパスを表示させる方法
  7. ( 6 ↓) 【制作Tips】iPhone画面解像度まとめ
  8. (圏外↑) 【Mac】iMovieの保存場所を変更する
  9. ( 8 ↓) 【Mac】外付けメディアが取り外せなくなったらSpotlightの除外項目を設定してみる
  10. ( 10 - ) 【制作Tips】画面解像度一覧表
このエントリーをはてなブックマークに追加

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

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

こんにちは(・∀・)

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

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

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

sample

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

demo

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

CSS

h2 {
  position: sticky;
  top: 0;
}

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

HTML

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

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


関連リンク

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

参考

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

  • CSS3 スティッキー
このエントリーをはてなブックマークに追加