Add interactive menu which moves a dot when user scroll down the page

I’m trying to create a small animated menu which would be positioned on the top of my one-page website. Page is organised as a book, so it would have chapters like introduction etc. as you scroll from top to bottom. My small menu would have one line and along this line would be names of chapters.There would also be a dot, and the dot would move along this line, and depending on which chapter have you positioned your browser, dot would move along and position itself accordingly. Also, if you click on the specific chapter on this menu, browser would automatically jump there, as well as the little dot. Problem is, I’m new to CSS/HTML/Javascript and I have difficulties in doing this. So far I managed to create a dot and names of chapters but I have issues in positioning them. For some reason, line I created won’t show but circle will.
So, to sum it up:

1. create a horizontal line in the middle
2. position dot at beginning of the line (Intro chapter)
3. position names of chapters under the line on some regular intervals
4. add logic which will follow which chapter is shown in the browser and move little dot accordingly
5. add links to jump to specific part of the page when user clicks on specific chapter name in the menu (this part I know how to do)

.section{
    background:black;
    width: %100;
    /* center a div insie another div*/
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    height: 200px;
}

.circle {
    width: 5px;;
    height: 5px;
    margin: 10px;
    background: white;
    border-radius: 50%;
}

ul {
  display: flex;
}

li {
  color: white;
  transform: rotate(65deg);
  transform: translate (-30px,-30px);
  list-style-type: none;
}

.line {
  height 10px;
  width: 100%;
  transform: translate (50%,0);
}

.list {
  transform: translate(50%,50px);
}

<div class="section">
  <div class="list">
  <ul>
    <li>Intro</li>
    <li>Part 1</li>
    <li>Part 2</li>
  </ul>
  </div>
   <div class="circle"></div>
  <div class="line"></div>
</div>