so I want to make a simple thing and I meet a problem:
I want my Navigator can follow where we scrolled to but don't move when we haven't scrolled after title text. In another way to explain it, the Navigator will follow where we're at after we scrolled over title and the navigator will stay at below the title text and at left side before following.
here's my code:
<!DOCTYPE html>
<html>
<head>
<title>a title</title>
<meta charset="UTF-8">
</head>
<style>
body {
background: rgb(20, 20, 20);
margin: 0px;
}
.titlecontainer,
.contentcontainer {
background-color: rgb(40, 40, 40);
border-radius: 10px;
padding: 10px;
margin: 10px;
}
.titletext {
color: rgb(102, 212, 255);
font-size: 35px;
text-align: center;
margin: 0px;
}
.text {
color: rgb(102, 212, 255);
font-size: 20px;
margin: 0px;
}
nav {
position: fixed;
top: 0;
left: 0;
width: 200px;
height: 200px;
background-color: rgb(40, 40, 40);
display: flex;
flex-direction: column;
align-items: left;
overflow-y: hidden;
border-radius: 10px;
padding: 10px;
margin: 10px;
}
.nav::-webkit-scrollbar {
display: hidden;
}
.navigator {
color: rgb(102, 212, 255);
font-size: 20px;
margin: 0px;
}
.content {
display: flex;
}
.contentcontainer {
margin-left: 250px;
}
</style>
<body>
<div class="titlecontainer">
<p class="titletext">Title</p>
</div>
<div class="content">
<nav>
<p class="navigator">Navigator</p>
<br>
<p class="navigator">Top</p>
<p class="navigator">Chapters</p>
<p class="navigator">- Chapter 1</p>
<p class="navigator">- Chapter 2</p>
<p class="navigator">Bottom</p>
</nav>
<div class="contentcontainer">
<p class="text">contents</p>
<br>
<p class="text">contents</p>
<br>
<p class="text">contents</p>
<br>
<p class="text">contents</p>
<br>
<p class="text">contents</p>
<br>
<p class="text">contents</p>
<br>
<p class="text">contents</p>
<br>
<p class="text">contents</p>
<br>
<p class="text">contents</p>
<br>
<p class="text">contents</p>
<br>
<p class="text">contents</p>
<br>
<p class="text">contents</p>
<br>
<p class="text">contents</p>
<br>
<p class="text">contents</p>
<br>
<p class="text">contents</p>
<br>
<p class="text">contents</p>
<br>
</div>
</div>
</body>here's 2 pictures for explaining what I want to make:
