2021年03月1日(月)

JavaScriptは無し、スクロールした時にヘッダの高さを縮ませて上部に固定表示させるCSSの実装テクニック

• 0
• 65
• 278
• 190

スクロールした時にヘッダの高さが縮んで上部に固定表示させるWebページを見たことがあると思います。今まではJavaScriptを使用する必要がありましたが、CSSのposition: sticky;を一工夫して使用することで簡単に実装できます。

高さを縮ませるのはヘッダに限らず、パネルやバナーなど他の要素でも簡単に実装でき、汎用性にも優れていると思います。