ホーム(記事一覧)へ

CSSで要素を追従させる「position:sticky」

position:stickyを使うと要素を追従させることができます。

具体的に言うと指定した要素がスクロールされ、画面の一番上から画面外に行こうとしたときに画面一番上に固定されるイメージです。

例としてサイドメニューを追従させたいときに使えます。

CSSで要素を追従させる「position:sticky」について説明します。

position:stickyで要素を追従させる方法

追従させたい要素に以下を指定します。

position: sticky;
top: 0;

position:sticky実装例

↓スクロールして確かめてみてください。

「ではみなさんは、そういうふうに川だと云いわれたり、乳の流れたあとだと云われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか。」先生は、黒板に吊つるした大きな黒い星座の図の、上から下へ白くけぶった銀河帯のようなところを指さしながら、みんなに問といをかけました。  カムパネルラが手をあげました。それから四五人手をあげました。ジョバンニも手をあげようとして、急いでそのままやめました。たしかにあれがみんな星だと、いつか雑誌で読んだのでしたが、このごろはジョバンニはまるで毎日教室でもねむく、本を読むひまも読む本もないので、なんだかどんなこともよくわからないという気持ちがするのでした。
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はクセがあるのでうまく動作しないときは下記の記事も参考にしてください。

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」についての説明でした。

関連記事