ウェブサイトの PC 向け表示ではヘッダを上部に固定しないでほしい

モバイル向けはいいんです。けど PC 向けの表示ではウェブサイトのヘッダが上部に固定されていないと嬉しいなあ、と思います。

ちょっと固定してみる

これを書いている時点でこのブログは画面幅が 990px 以下の場合にヘッダ部分が上部に固定されるようになっていて、それを超える場合はスクロールに従うんだけど
← このボタンを押すと一時的に position: fixed; が適用されるようにしてあります。

要するに PC などの大きめの画面で見ているときに上のボタンを押すと、ヘッダが上部に固定されます。

困る

固定されると何が起きるかというと、画面上部の一部を常にヘッダが占めることになります。そりゃそうだ。

そうなると、ヘッダの裏にある本文が読めない。

マウスやらトラックパッドやらのポインティングデバイスで画面をスクロールするなら特に問題ありません。またカーソルキーで動かす場合にも困りません。

けどスペースキーで読み進めるとなると困る。

ほとんどのブラウザではスペースキーが押されると ほぼひと画面分上にスクロールします。 shift を押しながらスペースだと逆方向にスクロール。

読みもののウェブページは普段そうやって操作しているので、ヘッダが固定されてると困ります。ひと画面分スクロールするとさっきまで画面の下ぎりぎり外側にあった文字が画面上部に移動するからヘッダに隠れてしまって読めない。

解決方法はあるけど

もちろん解決方法はあって、スペースキーが押されたときに JavaScript でキーボードイベントを奪って画面の高さからヘッダの高さを引いたぶんだけスクロールする処理を入れればちゃんと文字が隠れないようにできる。そういう実装をしてるサイトもちょくちょく見ます。

これが普及するといいな。汎用コード書いてどっかに置いとこうかな。

けどまあ物理キーボードなどという太古のデバイスを使って、しかもスペースキーで画面をスクロールさせて読んでるような人までサポートしてらんないよと言われたらそりゃそうだろうなと思います。

  • このエントリーをはてなブックマークに追加