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

【CSS】簡単に固定できるposition: sticky;の実装サンプル集
なにかと使える
sticky!(スティッキーと読みます)

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

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

HTMLとCSSはこちら

HTML

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

CSS

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

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

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

HTMLとCSSはこちら

HTML

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

CSS

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

制作メモ

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

対応ブラウザ

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

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

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

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

  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の意味って知ってますかー
うーんと、粘着性!ピタッとくっつくので使い方次第でいろいろなところで大活躍すると思いますー

関連記事

Author

デザコト

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。

Googleさんの
おすすめ

4

/

14

2024

Googleさんの
おすすめ

4

/

14

2024

デザインの記事

TALKING CITY|柏の葉イノベーションフェス2023
5年経った無印良品窓の家
【jQuery】 ローディング、実装サンプル集