position:stickyを使ってみる

スクロールに合わせて要素を固定できるposition: sticky を試してみました。

対応ブラウザ

対応ブラウザですが、IEでは対応していないようです。
またSafariではベンダープレフィックスが必要になります。
　

サンプルコード

例として、サイト内のローカルナビをスクロールに合わせて上部固定するサンプルを試してみます。

<header>ヘッダー</header>
<main>
	<div class="main">メインコンテンツ</div>
	<ul class="local-nav">
		<li><a href="#contents-a">コンテンツA</a></li>
		<li><a href="#contents-b">コンテンツB</a></li>
		<li><a href="#contents-c">コンテンツC</a></li>
	</ul>
	<section id="contents-a">
		<h2>コンテンツA</h2>
		<p>テキストテキストテキスト</p>
	</section>
	<section id="contents-b">
		<h2>コンテンツB</h2>
		<p>テキストテキストテキスト</p>
	</section>
	<section id="contents-c">
		<h2>コンテンツC</h2>
		<p>テキストテキストテキスト</p>
	</section>
</main>
<footer>フッター</footer>

.local-navをスクロールに合わせて固定する想定です。
次にCSSです。(関連部分のみの抜粋になります。)

.local-nav {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
}

Safari用にベンダープレフィックスもつけています。
これで試してみると、意図した動作になりました。
position: stickyのデモページ

先ほどの例ではtop:0 としましたが、bottom:0 とすることで下部固定もできます。
先ほどの例を少し変更して、シェアボタンを下部に固定するサンプルを試してみます。

<header>ヘッダー</header>
<main>
	<div class="main">メインコンテンツ</div>
	<section id="contents-a">
		<h2>コンテンツA</h2>
		<p>テキストテキストテキスト</p>
	</section>
	<section id="contents-b">
		<h2>コンテンツB</h2>
		<p>テキストテキストテキスト</p>
	</section>
	<section id="contents-c">
		<h2>コンテンツC</h2>
		<p>テキストテキストテキスト</p>
	</section>
	<div class="share-btns">
		<a href="">シェアボタンA</a>
		<a href="">シェアボタンB</a>
		<a href="">シェアボタンC</a>
	</div>
</main>
<footer>フッター</footer>

.share-btnsを下部に固定する想定です。
CSSはtopをbottomに変更したのみです。

.share-btns {
	position: -webkit-sticky;
	position: sticky;
	bottom: 0;
}

これで該当部分にスクロールされるまでシェアボタンが下部に固定されるようになりました。
position: stickyのデモページ2
　

IEの対応

position: stickyはIEで対応していませんが、Polyfillを利用することで一部機能を対応することができます。
今回はStickyfillを使ってみます。

上記サイトからファイルをダウンロードして、先ほどのローカルナビの例に読み込みませます。

<script src="stickyfill.min.js"></script>

position: stickyを指定している.local-navに対してPolyfillの設定を行います。

var elements = document.querySelectorAll('.local-nav');
Stickyfill.add(elements);

これでIEでも固定配置を実装することができました。
position: stickyのIE対応のデモページ1
　

IE9以降で動作するようですが、top以外(bottom,left,right)には対応していないようなので注意が必要です。
実際に先ほどのシェアボタンの例で試してみましたが、IEでは固定配置にできませんでした。
position: stickyのIE対応できない場合のデモページ
　

【参考サイト】

• position: sticky;の仕組みや実際の使い方をやさしく解説 | コリス
• position – CSS: カスケーディングスタイルシート | MDN
• GitHub – wilddeer/stickyfill: Polyfill for CSS `position: sticky`