【CSS】簡単に固定できるposition: sticky;の実装サンプル集

なにかと使える、

sticky！（スティッキーと読みます）

実装サンプル、ヘッダー（ナビにも使える）

See the Pen
【CSS】position: sticky; – ver.01 by 125naroom (@125naroom)
on CodePen.

コードはこちら

HTML

<main>
  <nav>nav</nav>
  <div class="content">content</div>
  <footer>footer</footer>
</main>

必要なのは、

これだけですー。IEの場合は『Polyfill』を使えば問題なしですー。

CSS

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

stickyを使ったサンプルページはこちら

実装サンプル、SNSシェアボタンに使える

See the Pen
【CSS】position: sticky; – ver.02 by 125naroom (@125naroom)
on CodePen.

コードはこちら

HTML

<main>
  <div class="content">
    <nav><div class="one">a</div></nav>
    content
  </div>
  <footer>footer</footer>
</main>

必要なのは、

これだけですー。SNSボタンで使ってるのをよく見かけますー。

CSS

nav {
  position: absolute;
  top: 0;
  left: -90px;
  height: 100%;
}
nav .one {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
}

stickyを使ったサンプルページはこちら

制作メモ

ベンダープレフィックスはSafari用に『-webkit-』が必要です。

stickyを使ったサンプルページはこちら

対応ブラウザ

『position: sticky;』の対応ブラウザは下記サイトで確認できます。

Can I use

IEの場合は『Polyfill』を使えば問題なし

まずは『Polyfill』に必要なファイルを下記サイトからダウンロードします。

stickyfill

ダウンロードファイルの中で必要なファイルは以下の1点です。

• stickyfill.min.js

HTML

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/stickyfill.min.js"></script>

JS

$(function() {
  var elements = document.querySelectorAll('.sticky');
  Stickyfill.add(elements);
});

さいごに

stickyの意味って知ってますかー？

うーんと、粘着性！ピタッとくっつくので使い方次第でいろいろなところで大活躍すると思いますー

関連記事

【jQuery】スクロール途中から追尾（fixed）、指定位置（class）で消える