JavaScriptライブラリ「Fixed-sticky」DEMO

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

CSSの「position: sticky」よりも ブラウザ対応が広い JavaScriptライブラリ「Fixed-sticky」を使ってみます。
IEは7から、Android 4から対応だそうです。

このページは、背景が薄いグレーの部分が<section>要素で、padding:2em を指定しています。
スクロールしていってください。

これは何も指定していない<h2>要素です

positionプロパティも、「Fixed-sticky」も使っていません。
普通に他の要素と共にスクロールし、ビューポートの上辺や下辺に達してもスタックすることはありません。

この<h2>要素は「top: 0」と クラス「.fixedsticky」を指定

クラス「.fixedsticky」をつけ、「top:0」を指定しています。
ビューポートの上辺に達するとスタックします。

親要素の範囲内だけスタックし、それ以外は親要素とともにスクロールします。
（ここでの親要素は <section>要素）

このように、要素にクラス「.fixedsticky」を付け、top か bottomプロパティを指定し、あとは JavaScript を書けば、「Fixed-sticky」を適用できます。
Javascriptの部分は <body>内に書いても、<head>に書いてもOK。

HTML（とJavascript）

<section>
<h2 class="top fixedsticky">タイトル</h2>
<p>テキスト</p>
</section>

<script src="jquery.js"></script>
<script src="fixedsticky.js"></script>
<script>
$( '.top' ).fixedsticky();
</script>

CSS

.top {top:0}

スクロールする親要素を作れば、その中でスタックします。
「ほんっとに...」記事内での全く同じサンプルを「Fixed-sticky」で作ってみました。
position: stickyの指定は削除しています。同じ動作をしますね。

レシピ一覧

お肉のおかず
とんかつ
肉団子の甘酢あんかけ
豚の角煮
鶏もも唐揚げ
肉どうふ
チンジャオロースー
お魚のおかず
さばの竜田揚げ
白身魚の南蛮漬け
さば味噌煮
いわしの梅干し煮
いわしハンバーグ
ぶり大根
野菜のおかず
きんぴらごぼう
小松菜と油揚げのおひたし
なすの揚げだし
筑前煮
肉じゃが
かぼちゃのそぼろ煮
卵・豆腐・乾物のおかず
だし巻き卵
茶碗蒸し
納豆オムレツ
豆腐ステーキ
切り干し大根の五目煮
ひじき煮
ごはんもの
たけのこご飯
グリーンピースご飯
そら豆としらすの混ぜご飯
五目炊き込みご飯
あさりご飯
お赤飯

HTML

<div class="smpsticky">
<h3>レシピ一覧</h3>
  <dl>
    <dt class="top fixedsticky bgcl1">お肉のおかず</dt>
    <dd>とんかつ</dd>
    <!--略-->
  </dl>
  <dl>
    <dt class="top fixedsticky bgcl2">お魚のおかず</dt>
    <dd>さばの竜田揚げ</dd>
    <!--略-->
  </dl>
  <dl>
    <dt class="top fixedsticky bgcl3">野菜のおかず</dt>
    <dd>きんぴらごぼう</dd>
    <!--略-->
  </dl>
  <dl>
    <dt class="top fixedsticky bgcl4">卵・豆腐・乾物のおかず</dt>
    <dd>だし巻き卵</dd>
    <!--略-->
  </dl>
  <dl>
    <dt class="top fixedsticky bgcl5">ごはんもの</dt>
    <dd>たけのこご飯</dd>
    <!--略-->
  </dl>
</div>

<script src="jquery.js"></script>
<script src="fixedsticky.js"></script>
<script>
$( '.top' ).fixedsticky();
</script>

CSS

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;  position:stickyの指定をコメントアウトしています
  position:sticky;
  top:0  これは別に指定（.topで）しているのでコメントアウトしています*/
  }
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}
.top {top:0}

「bottom: 0」でも試してみます。
この<section>が画面に現れてから、下のブルーのボックスが、ビューポートの下辺にスタックしています。

ブルーのボックスは、<div>要素です。
「bottom: 0」と クラス「.fixedsticky」を指定しています。

親要素（ここでは<section>要素）の範囲内だけ、ビューポートの下辺にスタックし、それ以外は親要素とともにスクロールします。

HTML

<section>
<p>テキスト</p>
<pre>HTMLコード</pre>
<pre>CSSコード</pre>
<div class="bottom fixedsticky">テキスト</div>
</section>

<script src="jquery.js"></script>
<script src="fixedsticky.js"></script>
<script>
$( '.bottom' ).fixedsticky();
</script>

CSS

.bottom {bottom:0}
この要素は「bottom: 0」と クラス「.fixedsticky」を指定
この要素は<section>の外に出したので親要素は<body>。「top: 30px」と クラス「.fixedsticky」を指定。

上のグリーンのボックスは、<section>から出してますので、親要素は<body>です。

自分の本来の位置よりも上側を表示している場合は、親（body）と一緒にスクロールし、ビューポートの上辺から30pxの位置に達したらスタックします。
親要素が<body>なので、一度スタックしたらずっとそのままです。

「position: sticky」のサンプルで、メニューバーを上部に固定しましたが、同じことがこのJSライブラリ「Fixed-sticky」でもできますね。
サイドバーのスタック（普通にスクロールしてきて最後のブロックは固定する）にも使えますね。

HTML

<div class="top-a fixedsticky">テキスト</div>

<section>
<p>テキスト</p>
<pre>HTMLコード</pre>
<pre>CSSコード</pre>
</section>

<script src="jquery.js"></script>
<script src="fixedsticky.js"></script>
<script>
$( '.top-a ).fixedsticky();
</script>

CSS

.top-a {top:30px}

「Fixed-sticky」の使い方

  1. Fixed Sticky- GitHub でファイルをダウンロード。その中の「fixedsticky.js」と「fixedsticky.css」を使います。
  2. 「fixedsticky.css」を HTMLに読み込ませます。 
    <head>
<link rel="stylesheet" href="css/fixedsticky.css">  <!--この場合 fixedsticky.css は「css」フォルダに入れています-->
</head>
  3. 使用したい要素に、CSSの「topプロパティ」または「bottomプロパティ」を指定します。上にスタックしたければ top、下なら bottom。
  4. 使用したい要素に、クラス「.fixedsticky」を付けます。
  5. 以下のスクリプトを<body>内の最後（</body>の直前）に書きます。
    jQueryのセレクタを使うので、jQueryも読み込ませます（1行目）。ここでは本家のデモと同じバージョンを使いました。（jQueryは<head>内でも）
    最初にダウンロードした「fixedsticky.js」を読み込ませるのを忘れずに（2行目）
    要素を呼び出す部分（4行目。ここがjQueryのセレクタ）は、先ほどの「.fixedsticky」とは別につけたクラス名や、id名を書きます。
    1つでもいいし、下記のように「,（カンマ）」で区切って複数指定することもできます。 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/fixedsticky.js"></script>  <!--この場合 fixedsticky.js は「js」フォルダに入れています-->
<script>
$( 'クラスまたはid, クラスまたはid' ).fixedsticky();
</script>

ちなみに、このページは「.top」「.bottom」「.top-a」というクラス名を使ったので、下記のように指定しています。

<script>
$( '.top, .bottom, top-a' ).fixedsticky();
</script>
.top {top:0}
.top-a {top:30px}
.bottom {bottom:0}