Result
スクロールするとプログレスバーが進んで、
あとどれくらいページの高さがあるか分かるようにするやつ
css
header { position: fixed; top: 0; height: 125px; width: 100%; background: white;}main { margin-top: 128px;}@supports (height: 100vh) { body { background: linear-gradient(to right top, #0089f2 50%, #ddd 50%); background-size: 100% calc(100% - 100vh + 129px); background-repeat: no-repeat; } body:before { content: ""; position: fixed; top: 128px; bottom: 0; width: 100%; z-index: -1; background: white; }}main,header { padding: 10px 10%; box-sizing: border-box;} |
背景をスクロールに応じたグラデーションにし、疑似要素で背景を隠す
疑似要素はヘッダーに設定した背景色と統一する
少しすき間を開ければプログレスバーみたいに見せられる、というトリック
html
<header> <h1>野球時代</h1> </header><main> 明治二十年代の事である。今この思い出を書こうとしている老学生のまだ紅顔の少年 ・ ・ ・ ・</main> |
