I've created a fixed sidebar navigation consisting of 3 divs made to look like dots, each representing one of my page sections. Each of those page sections take a 100vh height. Now I am trying to figure out how to determine where on the page is the scroll located and which div am I looking at.

I am using Vue.js which will definitely make things easier to do as soon as I figure out my question.

In order to do that I assume the bare minimum I need would be `window.scrollY`, `OffsetTop` and the `height` of every section in order to determine if the `window.scrollY` is between the section's `OffsetTop` ( starting position of the section ) and `OffsetTop` + `height` ( ending position of the section ). Am I correct in my thinking so far?

So far I have this: 

```css
*, *:after, *:before {
        margin: 0;
        padding: 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        text-decoration: none;
        list-style-type: none;
        color: rgba(0, 0, 0, 0.8);
    }
    body {
        background-color: #f1f1f1;
        font-family: 'Roboto', 'Helvetica', 'Helvetica Neue', 'Arial', sans-serif;
        background-image: url("./assets/svg/topography.svg");
        background-attachment: fixed;
    }
    section {
        min-height: 100vh;
    }
    .navigation {
        display: flex;
        flex-direction: column;
        position: fixed;
        right: 5%;
        top: 50%;
        transform: translateY(-50%);
        text-align: right;
    }
    .navigation div {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        margin-bottom: 30px;
        transition: all .1s linear;
        border: 5px solid rgba(0, 0, 0, 0.5);
        cursor: pointer;
    }
    .navigation div:hover {
        transform: scale(1.2)
    }
    .one {
    background-color: red;
    }
    .two {
    background-color: blue;
    }
    .three {
    background-color: green;
    }
```

```html
<nav class='navigation'>
    <div></div>
    <div></div>
    <div></div>
</nav>
<section class='one'></section>
<section class='two'></section>
<section class='three'></section>
```