125naroom / デザインするところ(会社)です。

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

【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)で消える

おすすめ

Googleさんのおすすめ

Googleさんのおすすめ

デザインの記事

Aubloom オーブルーム – RAWSILK SHAMPOO ローシルクシャンプー
ちょっと思い出しただけ
【Google Chrome】ショートカットキーまとめ(Windows or Mac)