ヘッダーを固定しているときに、ある程度スクロールしたら高さを縮小したいということがよくあるので、そのサンプルを作ってみます。 サンプルコード HTML <header class="header"> <div class="inner clearfix"> <div class="header-logo"><a href="">ロゴ</a></div> <nav class="header-nav"> <ul> <li><a href="">ナビ1</a></li> <li><a href="">ナビ2</a></li> <li><a href="">ナビ3</a></li> <li><a href="">ナビ4</a></li> <li><a href="">ナビ5</a></li> </ul> </nav> </div> </header> CSS /* 通常のヘッダー */ .hea
![固定ヘッダーをある程度スクロールしたら縮小して表示する](https://cdn-ak-scissors.b.st-hatena.com/image/square/c16f3a0a5fcccf2a2d4faf339db15bd8f72ac5b7/height=288;version=1;width=512/https%3A%2F%2Fcly7796.net%2Fblog%2Fwp-content%2Fuploads%2F2015%2F08%2Fscroll.jpg)