Fixed Stickyは、親要素にピタッと張り付いてスクロールに追随する要素を実装できるjQueryプラグインです。
挙動については、以下デモページをご参照ください。
当記事では、Fixed Stickyの実装方法についてご紹介いたします。
Fixed Stickyの実装手順
ステップ1. Fixed Stickyのダウンロードと設置
まずはGitHubからFixed Stickyをダウンロードします。ダウンロードしたファイルを解凍し、fixedsticky.jsをサーバー上にアップロードしましょう。
ファイルが設置できたら、以下を<head>～</head>内に記述して、jQuery本体とfixedsticky.jsを読み込みます。
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script src="js/fixedsticky.js"></script>
ステップ2. スクロール追随する要素のマークアップ
スクロール追随させたい要素にクラスとIDを付与します。
<div id="my-element" class="fixedsticky">
ステップ3. CSSの調整
CSSで要素の位置を調整します。
.fixedsticky { top: 0; }
上記の場合、要素が最上部に張り付いてスクロール追随します。
ステップ4. スクリプトの実行
最後にスクリプトを実行します。
<script>$( '#my-element' ).fixedsticky();</script>
あとがき
古いブラウザにも対応させなくてはいけない状況で、CSSの「position:sticky;」の代わりになるものを探している場合は、ぜひお試しください。