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

スクロールした時にヘッダの高さが縮んで上部に固定表示させるWebページを見たことがあると思います。今まではJavaScriptを使用する必要がありましたが、CSSのposition: sticky;を一工夫して使用することで簡単に実装できます。 高さを縮ませるのはヘッダに限らず、パネルやバナーなど他の要素でも簡単に実装でき、汎用性にも優れていると思います。 Shrinking Header on Scroll Without JavaScript by Håvard Brynjulfsen 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 デモページのデザインがシンプルなので、一見見落とすかもしれませんが、ページをスクロールするとヘッダの高さが縮んで上部に固定表示されます。 デモページ 仕組みは、簡単です。 ヘッダは外側と内側の2

[coliss]

position: sticky;を使った賢い実装方法。

[Kmusiclife]

“aaaaa aaaaa”

[noseld]

cssだけでできたんだ。

[kitone]

.header-outer { top: -50px; }

[radicode]

[]ヘッダの高さを縮ませて上部に固定表示💡 position:sticky

[IIIIIIIIIIIIIIIIIIII]

美しくない

[monomoti]

position: sticky

[syukit]

JSで別にええやん、とも思ったけど割と便利そう

[Shinwiki]

またダーティーハックから辻褄合わせの複雑仕様誕生ですか

[rkosaka]

スティッキーは挙動が難しくないですか？

[snaflot]

“position: sticky;は、ほぼすべてのブラウザでサポートされています”