スクロールするとヘッダー/ナビゲーションにシャドウがつく
スクロールするとヘッダー/ナビゲーションバーにボックスシャドウがつくのを取り入れたくて、散々調べたところ理想のソースコードを発見しました。感謝！
イメージ
実際の技術は違うかもですが、こういう感じです。
zozotown
slack
よりシームレスなチームワークを実現する、ビジネスコラボレーションハブ | Slack
ソースコード
とてもシンプルでわかりやすい！
jQueryを使うのでjQueryのスクリプトタグを埋め込んでください。
埋め込み方はこちらの記事を参考にしました！感謝！ macoblog.com
メモ
overflow: auto;
サンプルだと「HEADER」という文言だけですが、それ以外にもたくさんあった場合にどう表示させるかの指定。
transition: all 0.15s linear;
シャドウをふわっと表示させるアニメーション。 allは対象、linearはイージングの種類で「一定」という指定とのこと。
developer.mozilla.org CSS3プロパティ transition | HALAWATA.NET
雑感
今回調べるのにめちゃくちゃ時間がかかったので、ググる力が足りないなと痛感しました。 でも理想のものを見つけられて本当に良かったです。。
もし同じように困ってる方の助けになったらいいなと思います。
