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

現状はJSに頼る事になりそうですね。

via

CSS Only – Smooth Scrolling Sticky ScrollSpy Navigation