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

最終更新日:2017年08月23日  (初回投稿日:2017年08月23日)

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

本日のINDEX
  1. position: sticky は相対位置と固定位置の組み合わせ
    1. <dl>リストの<dt>で使うとイイかんじな position: sticky
    2. サイトのメニューに使ってもオモシロイ position: sticky
  2. position: sticky のブラウザ対応状況
  3. IE、Android4でも使えるJSライブラリ「Fixed-sticky」

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プロパティで位置指定された要素」にしか使えません。
で、位置指定した要素の表示の上下関係(重なり具合)を指定するプロパティです。
これまたけっこうややこしいです。

関連記事
この記事をはてなブックマークに追加

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

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

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
08 | 2017/09 | 10
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.