<ul class="uk-nav uk-nav-default" uk-sticky uk-scrollspy-nav="closest: li; scroll: true;">
<li><a href="#sec1" uk-scroll="offset: -100;">1</a></li>
<li><a href="#sec2" uk-scroll="offset: -300;">2</a></li>
<li><a href="#sec3" uk-scroll="offset: -500;">3</a></li>
</ul>
<section id="sec1">
<img src="https://picsum.photos/id/237/300/200">
<h1>セクション１</h1>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</section>
<section id="sec2">
<img src="https://picsum.photos/id/238/300/200">
<h1>セクション2</h1>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</section>
<section id="sec3">
<img src="https://picsum.photos/id/239/300/200">
<h1>セクション3</h1>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</section>
ul {
list-style: none;
background-color: rgba(255,255,255,.7);
width: 50px;
li {
a {
color: #000;
justify-content: center;
width: 100%;
text-align: center;
}
}
}
section {
width: 80%;
margin-top: 56px;
padding-inline: 50px;
img {
width: 50%;
object-fit: cover;
}
h1 {
font-size: 24px;
margin-block: 8px;
}
p {
margin-top: 0;
}
}
#sec1 {
img {
height: 200px;
}
}
#sec2 {
img {
height: 400px;
}
}
#sec3 {
img {
height: 600px;
}
}
View Compiled
