position: sticky; がスクロールで要素を固定するのに便利すぎた件

2022.1.10 更新

皆さまごきげんよう。
本日は、CSSのposition: sticky; がとても便利だったのでご紹介します(^^)

ちょっと前に当ブログでご紹介したプラグインQ2W3 Fixed Widgetですが、ワードプレスの更新をして以降、何故かエラー表示が出る様になってしまいました。

●最近入れてみたプラグイン

そこで、プラグインを頼らずに何か出来ないかと調べたところ…とても簡単にほぼ同じことが出来てしまうcssがあったんです。

それがposition: sticky;です！

stickyとは？

辞書で引くと、

’’ねばねばする，べとつく，粘着する; ねばねばしたものがついた…
研究社新英和中辞典での「sticky」の意味’’

スクロールとともに、このcssを指定した要素が追尾してきて指定した場所にくっつく、そんな動作をわずか数行で実装してくれるんです。

このブログが実例になっていますので、軽くスクロールしてみて頂くとわかるのですが、右側のサイドバーの最後のウィジェットPopular postsのところまで来ると、メニューバーのあたりで固定される様になっています。

これはこのPopular postsのid、#top-posts-3に対して


#top-posts-3 {
    position: -webkit-sticky;
    position: sticky;
    top: 8em; /*ここで止める位置を調整する*/
}

こんな感じでcssに3行追加しただけなんです。

↓↓↓簡単なサンプルを作ってみましたのでご覧下さい。

sticky_sample

position: sticky; の使い方

このサンプルではこのサイトと似たレイアウトにして、左にメインの記事、右にウィジェットをいくつか、という作りになっております。

この中でposition: sticky; させているのは次の二つの要素です。
●左側の記事の見出しである<h2>


  .main h2{
    position: -webkit-sticky;
    position:sticky;
    top:0;
  }

●右側の4つある内の最後のウィジェット(クラスlast-widget)


 .last-widget{
    padding-bottom:1em;
    position: -webkit-sticky;
    position:sticky;
    top:0;
  }

ブラウザの縦の長さを縮めて見て頂くとstickyの効果がよりわかると思います。

左側の見出し<h2>全てにstickyが効いていますので、スクロールすると見出しが次々にトップに固定されていきます。次の見出しが来ると前の見出しが押し出される様な動きで入れ替わっていくところが面白いと思います。

右側は、最後のウィジェットまでスクロールするとトップに固定されます。

このように、cssたった3行でいとも簡単にプラグインの代わりが実装できてしまいました。

position: sticky; が効かない？

さて、ここで注意したい点があります。

stickyを指定した要素と、その親要素の高さを揃えましょう。

このサンプルでは最初、右側のウィジェットエリアにある最後のウィジェットに指定したstickyが、思う様にトップに固定されず悩まされました。その原因は、

親要素#secondaryの子要素である#widgetはコンテンツが少ないため#secondaryより高さが短い。そのため、スクロールしても高さが短すぎた故にposition: sticky;が効いている様に見えなかったんですね。

そこで子要素#widgetにheight:98%;を指定して親要素#secondaryと高さを(ほぼ)揃えてみたところすんなり解決出来ました。


#widget{
    background:#eeb;
    height:98%;/*最後のwidgetをstickyさせるため、親要素である#secondaryと同程度の高さに調整する*/
  }

stickyが上手く行かなかった場合は、stickyさせたい要素とその親要素など、各要素の高さを確認してみることをお勧めします。

他に、固定したい要素の親、先祖要素にoverflow:hidden;が入っていると効かない、というバグがあるようです。

また、IEなど対応していないブラウザも有りますので代替策も用意しておきましょう。

このブログでも何回かやったパララックスも、簡単なものならposition: sticky;で出来ちゃいますね(^^;

とても便利なposition: sticky;、他にもこんな使い方があるよ、といった情報がありましたらぜひ教えて下さい♪

それではまた次回、ごきげんよう(^^)/

position: sticky; がスクロールで要素を固定するのに便利すぎた件

stickyとは？

position: sticky; の使い方

position: sticky; が効かない？

いいね: