<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
list-style: none;
padding: 0;
margin: 0;
}
html,body{
width: 100%;
height: 100%;
overflow: hidden;
}
.warp{
width: 100%;
height: 100%;
overflow: auto;
}
.item-title{
width: 100%;
background: rgb(128, 123, 128)
}
.item-title{
top: 0px;
position: sticky;
}
.right{
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
z-index: 10;
}
</style>
<body>
<ol class="right">
<li><a href="#A">A</a></li>
<li><a href="#B">B</a></li>
<li><a href="#C">C</a></li>
<li><a href="#D">D</a></li>
<li><a href="#E">E</a></li>
<li><a href="#F">F</a></li>
<li><a href="#G">G</a></li>
</ol>
<div class="warp">
<ul class="ul" id="A">
<li class="item-title">
A
</li>
<li>
A1
</li>
<li>
A2
</li>
<li>
A3
</li>
<li>
A4
</li>
<li>
A5
</li>
<li>
A6
</li>
<li>
A7
</li>
</ul>
<ul class="ul" id="B">
<li class="item-title">
B
</li>
<li>
B1
</li>
<li>
B2
</li>
<li>
B3
</li>
<li>
B4
</li>
<li>
B5
</li>
<li>
B6
</li>
<li>
B7
</li>
</ul>
<ul class="ul" id="C">
<li class="item-title">
C
</li>
<li>
C1
</li>
<li>
C2
</li>
<li>
C3
</li>
<li>
C4
</li>
<li>
C5
</li>
<li>
C6
</li>
<li>
C7
</li>
</ul>
<ul class="ul" id="D">
<li class="item-title">
D
</li>
<li>
D1
</li>
<li>
D2
</li>
<li>
D3
</li>
<li>
D4
</li>
<li>
D5
</li>
<li>
D6
</li>
<li>
D7
</li>
</ul>
<ul class="ul" id="E">
<li class="item-title">
E
</li>
<li>
E1
</li>
<li>
E2
</li>
<li>
E3
</li>
<li>
E4
</li>
<li>
E5
</li>
<li>
E6
</li>
<li>
E7
</li>
</ul>
<ul class="ul" id="F">
<li class="item-title">
F
</li>
<li>
F1
</li>
<li>
F2
</li>
<li>
F3
</li>
<li>
F4
</li>
<li>
F5
</li>
<li>
F6
</li>
<li>
F7
</li>
</ul>
<ul class="ul" id="G">
<li class="item-title">
G
</li>
<li>
G1
</li>
<li>
G2
</li>
<li>
G3
</li>
<li>
G4
</li>
<li>
G5
</li>
<li>
G6
</li>
<li>
G7
</li>
</ul>
</div>
</body>
</html>
