CSSで要素を追従させる「position:sticky」の使い方
position:stickyを使うと要素を追従させることができます。
具体的に言うと指定した要素がスクロールされ、画面の一番上から画面外に行こうとしたときに画面一番上に固定されるイメージです。
例としてサイドメニューを追従させたいときに使えます。
CSSで要素を追従させる「position:sticky」について説明します。
目次
position:stickyで要素を追従させる方法
追従させたい要素に以下を指定します。
position: sticky;
top: 0;position:sticky実装例
↓スクロールして確かめてみてください。
<style>
.sticky{
position: sticky;/*コレ*/
top: 0;
left: 0;
width: 100%;
box-sizing: border-box;
border: 1px solid #999;
background: #faf3dc;
padding: 5px;
}
.wrap{
width: 100%;
height: 300px;
overflow: scroll;
border: 1px solid #CCC;
}
.scroll{
background:#f2f2f2;
padding: 10px;
}
</style>
<div class="wrap">
<div class="scroll">テキスト</div>
<div class="sticky">sticky</div>
<div class="scroll">テキスト</div>
</div>position:stickyはクセがあるのでうまく動作しないときは下記の記事も参考にしてください。
CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。
↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓
↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。
IEへの対応方法
非常に便利な「position: sticky」ですが、IEには対応していません。
でも大丈夫です。「fixedsticky.js」というjQueryで疑似的に対応できます。
fixedsticky.js使い方
1.fixedsticky.jsをダウンロード
GitHubからfixedsticky.jsをダウンロードします。
任意のフォルダに置きましょう。
2.htmlファイルに以下を記述
<script src="https://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="fixedsticky.js"></script>
<script>
$(function(){
$(".sticky").fixedsticky();
});
</script>1行目はjQueryファイルです。
2行目が先ほどダウンロードしたfixedsticky.jsです。階層を間違えずリンクさせましょう。
3行目～は「position: sticky」をあてたいクラスを指定します。
3.追従させたい要素にクラスを指定する
<div class="sticky">追従するよ</div>4.CSSに以下を記述
<style>
.sticky{
top: 0;
position: sticky;
}
.fixedsticky-withoutfixedfixed .fixedsticky-on, .fixed-supported .fixedsticky-on{
position: fixed;
}
</style>実はこのjQuery、要素が画面を通り過ぎるタイミングでクラスを切り替えているだけなのです。よって、そのCSSにIEでも使えるCSSである「position: fixed;」を指定します。ついでに「top: 0;」も指定します。
もうひとつ言うとIEのときだけクラスをつけるのでchromeなどではクラスがつかず、同時に「position: fixed;」も指定されないという寸法です。
さらにもうひとつ言うと「position: fixed;」をあてているので、親ではなくbodyが基準になります。特定の要素内でだけ追従させたいときはiframeなどで別ファイルを使用するしかありません。
まとめ
CSSで要素を追従させるには「position:sticky」を使います。
position: sticky;
top: 0;IEでは利用できないので「fixedsticky.js」というjQueryで疑似的に対応する必要があります。
以上、CSSで要素を追従させる「position:sticky」についての説明でした。
「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。
