なんてことない土曜日の話

新しいサイトのレイアウトの参考にと、にじいろクリップを眺めていた時のことでした。

なんかこう、ビビッ!!とくるサイトないかなぁ……
そう、某「いつでも、どこでも、誰とでも」なハイブリッドゲーム機のHD振動みたいに
心の芯が揺さぶられるような……ん？

そう、見つけてしまったのです。シノビリフレのサイトを！

こ、こいつは……下端固定メニューだと！？

そこに書かれていたのは、衝撃的な事実でした。

なんと810円にプライスダウンされていた！

上端のメニューを一部だけ固定するのは比較的簡単にできます。

body
　header
　nav
　div#body
　footer

といったタグ構成（header+navでヘッダー）の場合

nav {
  position: sticky;
  top: 0;
}

だけで大体終わります。
一定位置までスクロールしたらfixedのnavを表示するとかは必要ありません。
IEユーザは文句を言う前に、対応ブラウザへ移行しましょう。

今回の下端固定メニューの場合も実際には、

body
　header
　div#body
　nav
　footer

nav {
  position: sticky;
  bottom: 0;
}

だけで済む話なんです。ええ。

それではシノビリフレのタグ構成を見てみましょう。

body
　header
　div#body
　footer
　　nav
　　others (最下部にした時に表示されるもの)

そこに書かれていたのは、衝撃的な事実(タグ構成)でした。
ちなみにnavのみ表示されている時は、footerに.fixedが付いています。

さて、貴方ならどうやって実装しますか？少しだけ考えてみてください。

特定の条件を満たすと「裏オプション」も

どう実装されているかを確認するより、どう実装するかを考えた方が勉強になります。
というわけで、タグ構成はこのままでチャレンジしてみました。

とりあえずCSSだけで頑張った

footer.fixed {
  position: sticky;
  bottom: 0;
}
footer.fixed > :not(nav) {
  display: none;
}

見た目上と表示上はいい感じに再現されたものの、最下部に来るとスクロール領域が増えてスクロールバーがぴょこぴょこします。
シノビリフレはそんなことしない！

仕方なくjsでも手を加えた

ぴょこぴょこしない方法は分かっているのです。

footer.fixed {
  position: sticky;
  bottom: XXXX;    // -(othersのheight)px
}

とすれば良いのですが、XXXXは決め打ち以外にcssで当てようがありません。
どうせ.fixedの着脱時にDOMやwindowのサイズを使用しているので、js側で直接footerにbottomだけstyle付与しました。
これで大体シノビリフレと同じ挙動になってくれます。
ところで、.fixedなのにposition: sticky;ってどんな裏仕様ですか？

実際のところどうなのか

詳細までは見る気が起きなかったですが、以下の特徴を見るにサイズは決め打ちでしょうね。

footerにposition:absolute;
footer.fixedにposition:fixed;
bodyにfooter用のpadding-bottom指定

無駄に勉強させてもらった感じとなりました。

CSSが思い通りに当たらない場合は、HTMLのタグ構成から見直すべき

途中にも書きましたが、stickyを使えば上端固定メニューも下端固定メニューも結構簡単に実装できます。
ですが、適当に書いたHTMLと、それを無理矢理デザインに寄せたCSSの場合は、大体うまく行かずにどこかが崩れます。そんな場合は、どんなに詳しくてもCSSだけで対処するのではなく、HTMLのタグ構成から見直してはどうでしょう？　それくらいサイトデザインとHTMLは密接な関係にあるんですよ！というお話でした。
あるいは全タグにidを振ってデザイン管理しましょう！(ﾏﾃ

体形を見ただけで３サイズを当てられる特技は無くてもいいですから、
適当なサイトを眺めるだけで、おおよそのタグ構成が想像できるようになると良いですよね！