画面TOPに飛べる固定ヘッダーや固定ウィジェット色々実装してみた。

画面TOPに飛べる固定ヘッダーや固定ウィジェット色々実装してみた。

fixed_widget
モバイルファースト化が進み、
ヘッダーの位置や出し方がユーザのために大切になってきた。そこで今回は画像のような固定のウィジェットや、固定ヘッダーなどを作ってみた。

固定の「上に行く」ウィジェット

ユーザーのためには沢山情報があるべきだが、
情報が多ければ多いほど、スクロール量は多くなる。
そして最後までスクロールした後にTOPに戻るのは大変になってくる。

そこでよく見るのが、右下にある「▲」ボタン。
押すとTopまで一気にスクロールあれである。
早速実装してみた。

See the Pen widget by blue (@aoiBlue) on CodePen.0


リンク部分にposition: fixed;を入れて、
後はtop, bottom, right, leftを駆使して表示位置を調整すればOK。
リンクはTOP以外にも、任意のIDを振った個所に飛ばしてもいいかもしれない。

固定ヘッダー色々

次に固定ヘッダー
ヘッダーを固定してしまえば、Topへの遷移はもちろんだが、
他の操作もすぐに行えるのがポイント。
ただし、スマホの貴重な上部分を確保してしまう。
実装は以下。

See the Pen fixed-header by blue (@aoiBlue) on CodePen.0

こちらもヘッダーにposition: fixed;を指定するだけなのでとても簡単。
padding-topにヘッダーの高さを指定してあげないと、
一番上の要素と重なってしまうので注意。

固定ヘッダーその2

固定ヘッダーにしたいけど、
画面をあんまり占領したくない・・・ということもある。
そんな時に、youtube式ヘッダーを使う。
スクロール下にするとヘッダーが消えて、
スクロールを上にするとヘッダーが出てきて固定されるあれである。
実装は以下。

See the Pen fixed-header-scroll by blue (@aoiBlue) on CodePen.0

jQueryのscrollTop()を使うことで、
現在のスクロール位置を取得することが出来る。
それをスクロール前の位置と比較して上下どちらか判定し、
上ならヘッダーを出現させる、下ならヘッダーを消すという処理をしている。

position: fixed;って?

ここまでposition:fixedを使って固定を行ってきたが、
ではposition: fixedとは何なのか。
https://developer.mozilla.org/ja/docs/Web/CSS/position
詳細はこちらからだが、

要素は文書の通常のフローから除外され、ページレイアウト内に要素のための空間が作成されません。ビューポートによって定められた初期の包含ブロックに対して相対配置されます

となっている。
なるほどわからん・・・。
調べてみるとこんなリンクを発見した。
https://w3g.jp/css/guide/contining_block

もし当該要素が “position : fixed ;” と指定されている場合、包含ブロックは連続メディアの表示域によって設定される。ページ付けメディアの場合はページボックスの表示域になる。

とのことなので、
表示領域に対して相対配置を行ってくれるという認識でいいだろう。

また、最初のリンクの下の方を見てもらえばわかる通り、似たような機能にstickyがある。
こちらはまた後々記事にしていきたいが、親要素に対してのみfixedするといった機能がある。
stickyの方が新しいので、まだ対応していないブラウザなどもあり、
今回はfixedを使ったが、
基本的にはstickyを使っても今回の動きは可能である。