Simplicityを少し改造してみた part20 cssだけでスクロール追従

Simplicityでやっかいなのがスクロール追従部分です。
親テーマjavascript.jsにjQueryで処理がしてあり、ページのスクロールをするたびにこれら処理がされます。できるだけサイトを軽くするためにはこういった常時何かをするようなものを取り除きたいわけですが、jQuery(javascript)でやる以上、何かしらのきっかけを待つためにスクロールを監視する以外手はなかったわけです。

しかしながら、それしか無いと言いつつもcan i useで調べたらIEとedgeを除けば動作する機能するのがあるじゃないですか!!!
それがposition: stickeyです。

IEとedgeを除きと書きましたが、まぁ案の定と言うかsafariでも一部バグがあるようですが、まぁ動くんじゃなかろうかと。

サンプル

See the Pen cssだけでスクロール追従。#body-inの中身をflex化で対応 by Hidekichi (@Hidekichi) on CodePen.

ここでは画面が小さいので直接見てもらうかフルページビューPCで確認してもらえるとよりわかりやすいかと思います。

まず、スクロール追従だけはたった2行なので、それ以外の部分で色々とfixしてあります。

  • #body-inの中身はfloatさせてあるので、#body-in自体に高さはない
    • これを解除するためにfloatを解除してflexでレイアウトし直してあります。
  • #sidebarに背景をつけた時のために、背景色とpaddingを左右にだけ入れてあります
  • #sidebar-scroll(追従部分)だけ背景白でわかるようにしてあります
  • 追従部分の中にあるfacebookのウィジェットが300pxの幅より小さくなるとレイアウト崩れが起こるのをfixしてあります
    • タグに直接style属性で幅が設定されてあるので、これをjQueryで解除しています。

肝となる設定

親要素、先祖要素に遡ってoverflowが設定してあるとstickyが効かないようです。バグみたいですが、chrome,firefox共に2017/03/31現在、修正されていません。注意して下さい。

css的にはこれだけです。一応、ベンダープレフィックスで、position: -webkit-sticky;と入れておく方がより良いかと思います。
stickyの初期値はautoなので、top、bottom、left、right等のプロパティと一緒に使う必要があります。上記で言えば要素が画面から隠れるとtopの値の位置で追従します。ブラウザが勝手にやっているのでjQueryなどに比べて余計な処理がない分高速に動作するかとは思いますが、検証はしてません。

IEとedge、一部動作しないブラウザがあったとしても単純に追従しないだけでそこにあるだけですからデメリットとしては特に無く、どうしても要素を追従させたいと思う人に限っては別途何かしらのスクリプトを組んで強制的に動かすと言う方向にする方がサイト自体をflex化できますし、floatの弊害などから脱却できます。

Simplicityを少し改造してみた 番外編 part20 cssのfloatの弊害をブログカードで説明する
Simplicityのブログカードにて、問題がひとつあるのに気づかれた方がいるでしょうか? ブログカード自体の表示に問題はなく、デフォ...

現状のfloatでのスタイルでは、単純にflex化させると不具合が生じたりします。またflexにすることでclearfixをしなくてもよくなります。

clearは、floatを解除させるために使いますが、clearfixの場合は、floatさせた子要素の親要素に高さを持たせるために使うものですが、Simplicityの場合は、高さを持たせず単純なfloatの解除で利用されている節があり、そのため#body-inは高さを持たないわけですが、その下にあるfooter部分などは正しく表示されているというわけです。

しかし問題点は見た目に正しいのと言うのではなくて、floatさせた子要素を囲む親要素に高さを持たせて、その後に続く要素が正しい位置に何もしないでもあると言うことなのです。何かしらで要素を追加した時、それが何もしないでも正しい位置にあると言うのが正解なわけで、そのためにはそれよりも前にclearfixさせておく必要があります。

兎にも角にもchrome56あたりからstickyが復活されたということで、これは使うべきと思った次第です。
もし、これを利用する場合は、親テーマjavascript.jsより、コメントでスクロール追従とある部分から次のコメントまでをコメントアウトしておく必要がありますが、スクリプト内で/*〜*/のコメントがされているので、単純に、

としただけではコメントアウトできません。

を、

などとしたり、

としておく必要があるかと思います。

常時表示するのであれば、トップへ戻るボタンもstickyで出しておいてもよいかも知れません。calcを使えば高さから任意の位置を計算して、そこを超えたら追従するということもできるかも。

とにかく軽くする、利便性を上げると言う点からすると、cssで賄えるのであればcssを利用するのが一番良いかと思います。サイトの演出などでアクションを起こすのであればjQuery等を使うのが良いかと思います。しかしサイトの軽さに勝るものは多くはないと僕は思ったりしています。

あくまでも手法の一つとして。

スポンサーリンク

シェアする

フォローする

コメント

  1. 波衛門 より:

    凄い!
    CSSでこんなのができるとは思ってもありませんでした!
    ありがとうございます!