スティッキーナビゲーション

説明

スクロールしても画面に吸着して追従するナビゲーションを実装します。

手順

手順1

まずは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>

手順2

CSSを設定します。

追従する要素にposition: sticky;をつけるだけ。

topの値によって、吸着する位置が変わってきます。

コード

.header {  
    position: sticky;
    top: 0;
}

手順3

こちらはIEに対応する場合のみになります。

position: sticky;はIEに対応していないため、対応する場合はpolyfillを読み込む必要があります。

コード

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

npm

npm install stickyfilljs --save

サンプル

参考

• https://github.com/wilddeer/stickyfill