ほんっとにはじめてのHTML5とCSS3：【22-4】スクロールしていくとピタッと固定する position: sticky

【22-4】スクロールしていくとピタッと固定する position: sticky

最終更新日：2017年11月16日　（初回投稿日：2017年08月23日）

今回は position: sticky を使ってみます。
これは positionプロパティの値の中でもまだドラフトの値ですが、いろいろ活用できそうです。

本日のINDEX

positionプロパティ は、記事を4つに分けました。

【22-1】位置指定の positionと top, right, bottom, leftプロパティ: positionプロパティの値と、top, right, bottom, leftプロパティの値の紹介。positionプロパティのうち static, relative を使います。
【22-2】要素を絶対位置に指定する position: absolute: position: absolute を使う時のコツと、コレを使った要素の装飾をいくつか。
【22-3】要素を固定位置に指定する position: fixed: position: fixed の特徴や使用例、<header> を固定位置にした時のページ内リンクのズレの解消など。
【22-4】スクロールしていくとピタッと固定する position: sticky　←今日はココ: position: sticky はスクロールしていくと必要なところで要素がピタッと止まります。

参考：CSS Positioned Layout Module Level 3 -- W3C Working Draft, 17 May 2016

position: sticky は相対位置と固定位置の組み合わせ

position: sticky は、固定位置指定と相対位置指定の組み合わせ です。
sticky（スティッキー）とは「粘着性の」といった意味。

position: sticky を指定された要素は、スクロールしていくと必要なところで要素がピタッと止まります。これはけっこう使える。
ただし、IE が未実装だったり、すぐ導入できるわけではないんですが。

<dl>リストの<dt>で使うとイイかんじな position: sticky

とにかくサンプルをスクロールしてみてください。
Chrome、Firefox、Safari は見れます。（IE は未実装）

レシピ一覧

お肉のおかず: とんかつ; 肉団子の甘酢あんかけ; 豚の角煮; 鶏もも唐揚げ; 肉どうふ; チンジャオロースー

お魚のおかず: さばの竜田揚げ; 白身魚の南蛮漬け; さば味噌煮; いわしの梅干し煮; いわしハンバーグ; ぶり大根

野菜のおかず: きんぴらごぼう; 小松菜と油揚げのおひたし; なすの揚げだし; 筑前煮; 肉じゃが; かぼちゃのそぼろ煮

卵・豆腐・乾物のおかず: だし巻き卵; 茶碗蒸し; 納豆オムレツ; 豆腐ステーキ; 切り干し大根の五目煮; ひじき煮

ごはんもの: たけのこご飯; グリーンピースご飯; そら豆としらすの混ぜご飯; 五目炊き込みご飯; あさりご飯; お赤飯

上のサンプルのHTMLの抜粋です。

<div class="smpsticky">
<h3>レシピ一覧</h3>
  <dl>
    <dt class="bgcl1">お肉のおかず</dt>
    <dd>とんかつ</dd>
    <dd>肉団子の甘酢あんかけ</dd>
    <!--略-->
  </dl>
  <dl>
    <dt class="bgcl2">お魚のおかず</dt>
    <dd>さばの竜田揚げ</dd>
    <dd>白身魚の南蛮漬け</dd>
    <!--略-->
  </dl>
  <dl>
    <dt class="bgcl3">野菜のおかず</dt>
    <dd>きんぴらごぼう</dd>
    <dd>小松菜と油揚げのおひたし</dd>
    <!--略-->
  </dl>
  <dl>
    <dt class="bgcl4">卵・豆腐・乾物のおかず</dt>
    <dd>だし巻き卵</dd>
    <dd>茶碗蒸し</dd>
    <!--略-->
  </dl>
  <dl>
    <dt class="bgcl5">ごはんもの</dt>
    <dd>たけのこご飯</dd>
    <dd>グリーンピースご飯</dd>
    <!--略-->
  </dl>
</div>

上のサンプルのCSSです。
<dt>要素に「position: sticky」と「top: 0」を指定しています。
Safari は（iOS Safariも）ベンダープレフィックス（-webkit-）付きで「position: sticky」を実装してるそうです。

div.smpsticky {
	margin:0;
	padding:0;
	height:300px;   /*高さを決めて、dlがスクロールするようにしています*/
	border:solid #ccc 1px;
	overflow-y:scroll}   /*中身を縦にスクロールさせます*/
div.smpsticky h3,
div.smpsticky dt,
div.smpsticky dd {
	margin:0;
	font-size:18px;
	line-height:32px;
	padding-left:12px}
div.smpsticky h3 {font-size:20px; line-height:40px; color:#b0abe7}
div.smpsticky dl {margin:0; padding:0; border:none}
div.smpsticky dt {
  background: #B8C1C8;
  border:none;
  color:#fff;
  position:-webkit-sticky;   /*Safari用*/
  position:sticky;
  top:0}
div.smpsticky dd + dd {border-top:1px solid #ddd}
div.smpsticky dt.bgcl1 {background:#d789ad}
div.smpsticky dt.bgcl2 {background:#8990d7}
div.smpsticky dt.bgcl3 {background:#a4d789}
div.smpsticky dt.bgcl4 {background:#dad071}
div.smpsticky dt.bgcl5 {background:#d7a389}

親となる要素には特に何も position指定していませんが、それで大丈夫みたいですね。
固定位置指定もするので、<iframe>要素にしないとダメなのかな？と思ったけど、ただの<div>でいけました。親要素の中で「スクロールする」ことが条件みたい。

ですので、親要素の高さを決め、親要素に「overflow: scroll」を指定することが重要。親が <body> なら、わざわざスクロール指定しなくてもOK。

Can I use によると、Safari では、親に overflow: auto を指定すると position: sticky が効かないバグがあるらしいので「overflow: auto」は避けた方がいいようです。

また、要素がスタックする場所は、top、right、bottom、leftプロパティで決めた位置です。
上のサンプルだと <dt> を top:0 にして、<dt>の上辺が親要素の上辺に来た時にスタックするようにしています。
ただ、横方向のスクロール（overflow-x）はすべてのブラウザが実装していないので、今のところ right、leftプロパティは意味ないか。

overflowプロパティに関しては【20】overflowで、あふれた中身の表示方法を指定しようをご覧ください。

というわけで、position: sticky を使ったら、top、bottomプロパティの指定は必須。この指定が無ければ何も起こらず、ただ普通にスクロールするだけです。

サイトのメニューに使ってもオモシロイ position: sticky

こちらは別ページでサンプルを作りました。
ページをスクロールすると、メニューが画面上辺で固定するっていうサンプルです。
クリックで別ウィンドウで開きます。

メニュー部分の <nav>要素に position: sticky を指定しています。
内容がスクロールする要素が親である必要があるため、<nav> は <header>要素の外に出して <body>が直接の親になるようにしています。

メニューバーだけでなく、サイドバーのスタック（普通にスクロールしてきて最後のブロックは固定する）とかにも使えますね。

position: sticky のブラウザ対応状況

position: sticky は、けっこう使えるブラウザが多くなっています。
Can I use | CSS position:sticky

しかしIE 11 は未実装で、 Edge は ver.16 から実装するようですね。
Safari はベンダープレフィックスが必要。「position: -webkit-sticky」といった具合で値の方につけて使います。
Firefox は、テーブル関連の要素には使えないようです。
Chrome、Android は <th>要素は使えるけど、<thead> と <tr>要素には効かないとか。

というわけで、まだシェアが多い IE 11 で使えないので、今すぐ導入ってわけにはいかないですが、IEが消えた頃には普通に使えそうです。（2017年8月記）

IE、Android4でも使えるJSライブラリ「Fixed-sticky」

position: sticky と同じようなことができる JavaScriptライブラリ「Fixed Sticky」っていうのがあるそうで、IE7、Android 4、iOS 6.1 から使えるそうです。

デモページはこちら→ Fixed Sticky- Demo
ダウンロードはこちら→ Fixed Sticky- GitHub
使い方は GitHubに書いてありますが、けっこう簡単です。
使用したい要素にクラス名「fixedsticky」をつけて、top か bottomプロパティを指定。その要素を id名かクラス名で呼び出してスクリプトを実行させるってかんじでした。同梱の「fixedsticky.css」も使います。

ざっと試してみたサンプルです↓ クリックで別ウィンドウで開きます。

次回予告

今回で positionプロパティは終わりで、次回は z-indexプロパティについて。

z-indexプロパティは「positionプロパティで位置指定された要素」にしか使えません。
で、位置指定した要素の表示の上下関係（重なり具合）を指定するプロパティです。
これまたけっこうややこしいです。

関連記事

やる気を保つためにランキングに参加しています。
応援してくださるとすっごいやる気を出します！ (笑)

初心者にも使いやすい（と思う）レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。