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