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に頼る事になりそうですね。