javascript - 如何确定我所在页面的哪一部分以便在我的导航栏上反射(reflect)出来？

Question

我创建了一个固定的侧边栏导航，由 3 个看起来像点的 div 组成，每个 div 代表我的一个页面部分。这些页面部分中的每一个都采用 100vh 高度。现在我想弄清楚如何确定滚动条在页面上的位置以及我在看哪个 div。

我正在使用 Vue.js，一旦我弄清楚我的问题，它肯定会让事情变得更容易。

为了做到这一点，我假设我需要的最低限度是 window.scrollY、OffsetTop 和每个部分的 height为了确定 window.scrollY 是否位于该部分的 OffsetTop(该部分的起始位置)和 OffsetTop + height(该部分的结束位置)。到目前为止，我的想法是否正确？

到目前为止我有这个:

*, *: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;
    }

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

Answer 1

我们尝试在各部分之间的页面中导航的名称来自 emacs

*, *: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;
    }

<nav class='navigation'>
    <div></div>
    <div></div>
    <div></div>
</nav>
<section class='one'></section>
<a name='one'></a>
<section class='two'></section>
<section class='three'></section>
<a href='#one'> go to section one </a>