「position: sticky;」より便利!スクロールしたらヘッダやサイドバーがぴたっと貼り付くスクリプト -Fixed Sticky

HTMLは汚さずに、ヘッダ、ナビゲーション、サイドバー、ボタンなど、さまざまな要素をスクロールした際に指定した位置にぴたっと貼り付けるスクリプトを紹介します。

IE7+からサポートされており、「position: sticky;」の代替になる便利なスクリプトです。

サイトのキャプチャ

Fixed Sticky- GitHub

Fixed Stickyの特徴

Fixed Stickyで貼り付ける要素の位置は、親要素に依存します。
つまり、スクロールしてぴたっと貼り付く位置は、常に親要素となるコンテナ内です。

基本的な動作を見てみましょう。
まずは、要素に「top: 20px;」を指定してみます。

Fixed Stickyの動作

最上部まで20px以上空いている時

下方向にスクロールした場合、その要素はビューポートの最上部から20pxの位置に表示されるまでは通常通りスクロールで移動し、貼り付きません。

Fixed Stickyの動作

20px以下の時

最上部から20px以下になると、その要素以外はスクロールで移動しますが、その要素だけ20pxの位置に貼り付きます。

今度は「bottom: 20px;」を見てましょう。

Fixed Stickyの動作

最下部まで20px以上空いている時

上方向にスクロールした場合、20px以上空いていれば、通常通りにスクロールされて表示されます。

Fixed Stickyの動作

20px以下の時

20px以下であれば、その位置に配置され、コンテナの範囲内で貼り付きます。

参考: 「position: sticky;」のサポートブラウザ

「position: sticky;」はChrome56でサポートされましたが、現状IE, Edge, Opera Miniではサポートされていません。また、SafariやFirefoxでもバグがあるため、利用を控えている人が多いでしょう。

Fixed StickyはIE7+, Android 4.xをサポート、Opera Miniは静的に配置されます。

サイトのキャプチャ

「position: sticky;」のサポートブラウザ

Fixed Stickyのデモ

デモではスクロールをすると、指定した要素を親要素となるコンテナ内にぴたっと貼り付けます。

デモのキャプチャ

デモページ

デモのキャプチャ

デモ コントロールページ

Fixed Stickyの使い方

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。

Step 2: HTML

貼り付けたい要素にclassを与え、その要素を指定するためのidも与えます。

Step 3: CSS

要素を配置するためのCSSを記述します。上部でも下部でも、どんな値でもサポートされています。

Step 4: JavaScript

jQueryのセレクタで要素を指定し、スクリプトを実行します。

sponsors

top of page

©2024 coliss