ヘッドレスCMSとは?選択する前に知っておくべきこと。
BLOG

スクロールしても画面に吸着して追従するナビゲーションを実装します。
まずはHTMLを作成します。
作成する前に、追従したいエリアと追従したい要素を明確にしてください。
追従したいエリアの直下に追従したい要素を子要素として構成します。
今回は、追従したいエリアを.container
、追従する要素を.header
としています。.footer
のエリアまでいくと追従されなくなる想定です。
<div class="container">
<header class="header -sticky">
<p class="text">Header</p>
</header>
</div>
<footer class="footer">
<p class="text">Footer</p>
</footer>
CSSを設定します。
追従する要素にposition: sticky;
をつけるだけ。
top
の値によって、吸着する位置が変わってきます。
.header {
position: sticky;
top: 0;
}
こちらはIEに対応する場合のみになります。
position: sticky;
はIEに対応していないため、対応する場合はpolyfillを読み込む必要があります。
<script src="path/to/stickyfill.min.js"></script>
npm install stickyfilljs --save