Result
スクロール追従するページ内ナビゲーションのCSSオンリーvaer.です。
scroll-behaviorによるスムーズなスクロールと、ページ内ナビゲーションの現在地の明示も再現されています。
css
html { scroll-behavior: smooth;}.section-nav { width: 15em; position: fixed; top: 2rem; right: 2rem; padding-left: 0; border-left: 1px solid #ddd; background-color: rgb(0 0 0 / 0);}section:nth-of-type(even) { padding-bottom: 70rem;}section:nth-of-type(1) { background: right 2rem top 2rem / 15em var(--linkheight) no-repeat linear-gradient(#ccc, #ccc); }section:nth-of-type(2) { background: right 2rem top calc(2 * var(--linkheight)) / 15em var(--linkheight) no-repeat linear-gradient(#ccc, #ccc); }section:nth-of-type(3) { background: right 2rem top calc(3 * var(--linkheight)) / 15em var(--linkheight) no-repeat linear-gradient(#ccc, #ccc); }section:nth-of-type(4) { padding-bottom: 0; background: right 2rem top calc(4 * var(--linkheight)) / 15em var(--linkheight) no-repeat linear-gradient(#ccc, #ccc); }section:nth-of-type(4) section:nth-of-type(1) { background: right 2rem top calc(5 * var(--linkheight)) / 14em var(--linkheight) no-repeat linear-gradient(#ccc, #ccc); }section:nth-of-type(4) section:nth-of-type(2) { background: right 2rem top calc(6 * var(--linkheight)) / 14em var(--linkheight) no-repeat linear-gradient(#ccc, #ccc); }section:nth-of-type(4) section:nth-of-type(3) { background: right 2rem top calc(7 * var(--linkheight)) / 14em var(--linkheight) no-repeat linear-gradient(#ccc, #ccc); }section:nth-of-type(4) section:nth-of-type(4) { background: right 2rem top calc(8 * var(--linkheight)) / 14em var(--linkheight) no-repeat linear-gradient(#ccc, #ccc); }section:nth-of-type(4) section:nth-of-type(5) { background: right 2rem top calc(9 * var(--linkheight)) / 14em var(--linkheight) no-repeat linear-gradient(#ccc, #ccc); }section:nth-of-type(4) section:nth-of-type(6) { background: right 2rem top calc(10 * var(--linkheight)) / 14em var(--linkheight) no-repeat linear-gradient(#ccc, #ccc); }section:nth-of-type(4) section:nth-of-type(7) { background: right 2rem top calc(11 * var(--linkheight)) / 14em var(--linkheight) no-repeat linear-gradient(#ccc, #ccc); }section:nth-of-type(4) section:nth-of-type(8) { background: right 2rem top calc(12 * var(--linkheight)) / 14em var(--linkheight) no-repeat linear-gradient(#ccc, #ccc); }section:nth-of-type(5) { background: right 2rem top calc(13 * var(--linkheight)) / 15em var(--linkheight) no-repeat linear-gradient(#ccc, #ccc); }section:nth-of-type(6) { background: right 2rem top calc(14 * var(--linkheight)) / 15em var(--linkheight) no-repeat linear-gradient(#ccc, #ccc); }section:nth-of-type(7) { background: right 2rem top calc(15 * var(--linkheight)) / 15em var(--linkheight) no-repeat linear-gradient(#ccc, #ccc); }section:nth-of-type(n),section:nth-of-type(4) section:nth-of-type(n){ background-attachment: fixed;} |
スクロールはscroll-behavior: smooth;ですが、初見でどうやってるのか分からなかったのがナビゲーションの背景でした。
こちらはやや力業ですがbackground-attachment: fixed;を使っているようです。
section:nth-of-type(n),section:nth-of-type(4) section:nth-of-type(n){ background-attachment: fixed;} |
でスクロールに合わせて背景を固定し、個別に位置調整してるみたいですね。
あまり実用的ではない印象ですが、少し驚いたので備忘録としてメモしようと思います。
can i use
↑ 残念ながらSafariが未だに全滅です。対応する気はないのかなという気がしてきます。
↑ そして
background-attachment: fixed;もスマホで相変わらず微妙です。
現状はJSに頼る事になりそうですね。
