(cssのみ)縦スクロール画面で、自分がいる位置のヘッダータブにボーダーを引く方法

(cssのみ)縦スクロール画面で、自分がいる位置のヘッダータブにボーダーを引く方法

仕事で、縦スクロール画面のヘッダーで、
自分が今いる位置に下線を引く必要があった。
jQueryの場合、各要素のheightを保存しておいて、
スクロールイベントから長さを計算して各要素のheightに達したらborderを出す必要がある。
cssだけで同じようなことが出来ないかやってみたら出来たのでナレッジを残す。

やりたいこと。

scroll
HEADRE2エリアにある時は、ヘッダーのHEADER2の下に下線がひかれる。

今回やりたいのは、スクロールに対応する下線(下線に限らず、背景色の変化などでもOK)の表示。
言いたいことがよくわからないと思うので、やりたいことを同じことをしているページで示す。
https://www.japan-guide.com/e/e2164.html
こちらのサイトをスクロールするとわかるのだが、自分のいる位置と対応するタブに下線がひかれている。
こういった処理はjQueryでしかやる方法が出てこなかったが、cssで出来る方法を思いついたので実装していく。

早速実装していく。

というわけで早速実装していく。
今回使うのは「position: sticky;
headerを固定する際などに重宝するオプションで、要素を画面の上部等に固定することが出来るoptionである。
(position:fixedで代用することも可能だ。)
どういう風に実装するかというと、

  • position:stickyを使って下線を各要素の間だけ固定する
  • 固定していない間は下線を隠しておく。

という至って簡単なもの。

そして作ったものがこちら。

See the Pen sticky-border by blue (@aoiBlue) on CodePen.0

各要素の疑似要素beforeでボーダーを表示し、afterの方で隠すという実装にした。
疑似要素だけを使っているので、divだらけになってSEO評価が落ちることも無い作りにできた。
細かいポイントだが、jQueryの場合スクロールイベント取得するのはスクロールを終えてからなので、
スクロール中の遷移でボーダーが表示されないのだが、こちらはそちらにもばっちり対応可能だ。
何より、jQueryではなくcssだけで処理できるのでページが軽い

まとめ

  • 疑似要素beforeに、position:stickyを使って下線を各要素の間だけ固定する
  • 疑似要素afterを使って、固定していない間は下線を隠しておく。

今回はこの二つのテクニックを使うことで、
スクロールした位置に対応するタブに下線を表示する仕組みをcssだけで実装した。

今回は結構丁寧にリファクタリング出来たのだが、
after要素のbackground-colorをtransparentにする方法などもありそう。
他にも誰か気が付いた人が最適化してくれることを祈っています。