HTMLとCSSの組み合わせで、かなりの事ができる事を、日増しに認識してきている、ユゲタです。
一昔前には、HTMLは単なるマークアップ言語で、テキストの表現方法を形式化できるモノとして性的な言語として使われていましたが、
動的対応するために、Javascriptが発達して、さらに、見た目も含めたUI/UXを向上させるために、CSSが発展してきました。
そして、ようやく、stickyを使える時代が来たと、最近認識したので、とあるシステムで使う決断をしたのですが、改めてこの便利な「sticky」機能について、
まとめてみました。
最初少しだけハマった箇所などもあるので、その点も含めて、学習中の人や、まだstickyの便利さに気がついていない人の、
何かしらの情報の足しになると幸いです。
stickyについて
cssのposition機能は、「absolute」「relative」「static(default)」と「fixed」を、適宜使っていましたが、実は、もう一つ強力な機能として「sticky」が存在します。
webページの任意座標に配置することができる「absoute」は、「relative」と組み合わせて、領域座標管理ができて比較的利用頻度が高いですが、
webページ内で、どれだけスクロールしても、画面の右上にピッタリ固定させることができる「fixed」も、最近では広告などでも使われています。
特定の要素の中にたくさんのリストが書かれている場合に、そのスクロールに依存せずに対象の要素内にピッタリ固定させたいという場合に、この「sticky」を使うととても簡単に設置することができます。
詳しくは、リファレンスサイトを見てもらったほうが確実ですね。
position - CSS: カスケーディングスタイルシート - MDN
簡単使い方講座
とりあえず、サンプルコードを用意しました。
<div id="menus">
<div class="item">AAAAA</div>
<div class="item">BBBBB</div>
<div id="sticky" class="item">CCCCC</div>
<div class="item">DDDDD</div>
<div class="item">EEEEE</div>
<div class="item">FFFFF</div>
<div class="item">GGGGG</div>
<div class="item">HHHHH</div>
<div class="item">IIIII</div>
<div class="item">JJJJJ</div>
</div>
<style>
#menus{
width:200px;
height:200px;
overflow-y:scroll;
border:1px solid black;
}
.item{
height:50px;
border:1px solid red;
margin:5px;
}
</style>
この状態で、Cの箇所にID="sticky"という属性を付与しておきます。
そして、次のコードをstyleタグ内に追記すると、
#sticky{
position: -webkit-sticky;
position: sticky;
top:30px;
left:30px;
width:50px;
height:50px;
background-color:rgba(255,0,0,0.5);
}
Cの箇所が、スクロールすると、固定化されているのがわかります。
ポイントは、追記した、
position: sticky;
top:30px;
この箇所だけです。
使い方いろいろ
このstickyを使うと次のような使い方ができるようになります。
1. ページ途中からナビゲーションメニューを画面上部固定にする。
https://www.asobou.co.jp/blog/web/css-sticky
2. 階層構造浅めのカルーセルスライダーの構築。
粘着？！
今回解説した"position:sticky"は、「粘着指定位置要素」と呼ばれるらしく、使い方次第で、非常に高品位なユーザーインターフェイスを構築できます。
まったくjavascriptを使わずに、こうした表現ができてしまうというのも、一昔前から考えると本当に驚きかもしれませんね。
ちなみに、このstickyのブラウザ対応は、次のようになっています。
IEはもはや、サポート終了ということもあり、対象外にしてもいい時期だとすると、stickyを普通に使える時代が来たと言ってもいいかもしれませんね。
Let's sticky!!!
