CSS、要素を一定の区間だけ追尾させる。

一定範囲なら追尾も有り？

こんにちは、「ふ」です。
webページにスクロールしても画面に固定されて表示される、「追随型」のボタンやバナーを設置したいときがあるかと思います。しかしながら、ひたすら追尾してくる広告のように、ユーザを不快にはさせたくない。

では冒頭の画像のように「一定範囲のみ追尾して、やがて画面の上に消えていく要素」というのはどうでしょう。追尾区間を過ぎると自動的に非表示となるので、ユーザに「閉じる」や「✖️」などのボタンをクリックさせることもありません。これならさほど不快感を与えることもないのでは、と思いました。

そこで今回は「一定範囲のみで要素を画面に固定・追従させる」というものを作ってみます。CSSだけで実装できるので、みなさんも試してみてください。

便利なstickyの性質。

element {
    position:sticky;
    }

実装にはCSSのposition:stickyを使用します。この指定値は「親要素の画面に表示されている部分に対して、表示位置を固定する」という面白い性質を持っています。

例えば子要素にstickyを指定し、「bottom:0」と親の下部に指定したとき。

親要素が画面に100%入っているときは、子要素はもちろん1番下に配置されます(左)。また親要素の一部だけが画面に表示されている場合(右)には、その範囲に対して1番下に配置されます。

やがて。スクロールにより親要素が画面から表示されなくなるときには、子要素も一緒に画面外に消えていきます。stickyは直属の親要素の中でしか、作用しないためです。

このstickyの性質を利用し、

・要素を追従させたい範囲を親要素に指定
・直下に追従させたい要素をstickyで配置

すると、こちらで意図した範囲においてのみ、画面内に要素が固定されることになります。
HTMLの親子関係とCSSを調整するだけで、実現。簡単ですね🎵

画面下部で固定してみる。

それでは「画面下部にバナー画像を固定させる」という設定で、コードを書いていきます。

<div class = "content"></div> 

<div class = "content">
「「３<!-- この区間だけ要素を追尾させる -->」」
</div>

<div class = "content"></div>    

<div>要素を３つ用意しました。このうち、２つ目の要素が表示されている区間においてのみ、バナーを画面下に固定するようにします。

<div class = "content"></div>    

<div class = "sticky_area">
    <div class = "content"></div>
    <img class = "「「１banner」」" src = "banner.svg">
</div>
    
<div class = "content"></div>    

２つめの「.content」の下に、バナー用の画像を追加。そしてposition:stickyは親要素に対して作用するので、これらを<div>で囲んで入れ子にします。

.content {
    height:200vh;
    }

.sticky_area {
    background-color:#eee;
    }

スクロール状況が観察しやすいように「.content」の幅は画面高さの２倍にしてあります。また追尾させる領域は背景色を薄いグレーにしておきました。

要素を配置した状態⬆︎です。スクロールしてもまだバナー要素は固定されません。
ここからグレーの区間のみ、バナー要素が画面下部に固定されるようにします。

 .banner {
        position:sticky;
        bottom:0;
    }

スクロールしてみてください⬆︎。
グレーの範囲だけ、バナー要素が画面下部に固定されています。

画面上部で追随。

画面上部で要素を固定させたい場合。
要素の順番と位置を変更するだけでOKです。

 .banner {
        position:sticky;
        top:0;
    }

バナー要素の固定位置を今度は「top: 0」としました。

  <div class = "sticky_area">
    「「３<!-- banner要素を親要素内の先頭に -->」」
    <img class = "banner" src = "banner.svg">
    <div class = "content"></div>
</div>   

そして要素を追従させる「.sticky_area」内において、banner要素を先頭に配置しておきましょう。

position: stickyでは、固定方向に対する要素の順番は厳守されます。
ここではtopプロパティ（上方向）を指定しているため、stickyさせる要素よりも上に別の要素があると、あくまでその要素より下の範囲においてしか、上部に固定されません。

スクロールさせると一定区間のみ、画面上部にbanner要素が固定されます。

「うざくない追尾」完成。

最後までお読みくださり、ありがとうございました。
目的の要素を目立たせつつ、ユーザを不快にすることもない「うざくない追尾」が実現しましたね。

今回は一定範囲でのみ要素を追尾させる、というものを作ってみました。実装はとても簡単なので、ここにアニメーションなどのアレンジを加えてみるのもおもしろいかもですね。
みなさんも色々と試してみてください。

ではまた〜 🎵