menu
menu

キーワード検索

 

9月更新・前月(8月)の人気記事トップ10 - 09/01/2020

  1. ( 1 - ) 【Mac】Macのユーザー名とアカウント名を変更する
  2. ( 3 ↑) 【Mac】Safariでソースコードを見る方法
  3. ( 2 ↓) 【iPhone・iPad】投稿の準備中にエラーが起きました。後でやり直してください。
  4. ( 5 ↑) 【iPhone・iPad】iPhoneのメモリを簡単に解放する方法
  5. ( 7 ↑) 【Mac】Finderにフォルダのフルパスを表示させる方法
  6. ( 4 ↓) 【CSS】CSSだけでドロップダウンメニュー
  7. ( 圏外↑) iPhoneのツイッターアプリでユーザー名をコピーする方法【iPhone iPad】
  8. ( 6 ↓) 【jQuery】入門2. jQueryをHTMLに組み込む
  9. ( 10 ↑) 【Mac】MacにGoogle Driveをインストール
  10. ( 圏外↑) 【2020年度決定版】レスポンシブデザインのブレークポイントはこれで決まり❗️
このエントリーをはてなブックマークに追加

【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小技集

 

にほんブログ村 デザインブログ Webデザインへ
  • CSS3 スティッキー
このエントリーをはてなブックマークに追加