一页垂直点导航 - 通过多个小节突出显示一个点

Question

这是我在此的头一篇博文。 html 和 css 初学者，完全没有 javascript 的经验。 现在与这个斗争了一段时间。 我制作了一个包含几个部分的单页点导航。 这些部分中的每一个都是子部分。 当用户向下滚动第一部分的子部分时，第一个导航点应保持突出显示，然后随着第二部分及其各自的子部分进入屏幕视图，当然将突出显示更改为第二个点。 这是我到目前为止的代码片段。 真实页面由按章节分组的全屏图像组成。 我也离开了代码。 我使用此代码片段在 javascript 有一个 go ，但它不能满足我的特定需求。 感谢您的任何意见。

HTML：

<div class="dots-nav">
        <ul>
            <li class="first"><a href="#first"><span>1st section</span></a></li>
            <li class="second"><a href="#second"><span>2nd section</span></a></li>
            <li class="third"><a href="#third"><span>3rd section</span></a></li>
        </ul>
 </div>
    
<div id="first" class="section1">
    <h2>First section - chapter 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis, lacus gravida pharetra posuere, neque ligula malesuada mi, ac accumsan turpis neque sit amet libero. Morbi a hendrerit nibh, sed tristique turpis. Vivamus hendrerit tincidunt urna nec laoreet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent faucibus quis diam et auctor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ornare dui at nulla eleifend pharetra. </p>
</div>

<div class="section1">
    <h2>First section - chapter 2</h2>
    <p>Etiam erat eros, aliquam nec gravida vel, consectetur quis elit. Mauris convallis viverra purus ac facilisis. Mauris non libero vitae purus molestie accumsan sed vel urna. Fusce in laoreet justo, blandit vestibulum odio. In bibendum nunc id eros vehicula tristique. Suspendisse nec neque facilisis, commodo leo ac, gravida tellus. Duis tincidunt lacus in pretium bibendum. Donec elementum velit vel faucibus ornare. Vestibulum velit arcu, bibendum non laoreet nec, scelerisque eget ligula. Praesent sed euismod massa. Nullam dictum dolor eu consequat condimentum.</p>
</div>

<div class="section1">
    <h2>First section - chapter 3</h2>
    <p>Cras commodo est et eros vestibulum sollicitudin. Nullam mauris felis, fermentum eget placerat eu, sodales non elit. Proin semper cursus arcu, in vehicula justo dignissim eu. Donec laoreet dolor sit amet nibh suscipit vehicula. Morbi rutrum mattis dictum. Donec a molestie enim. Suspendisse imperdiet ex a turpis feugiat sollicitudin.</p>
</div>

<div id="second" class="section2">
    <h2>Second section - chapter 1</h2>
    <p>Maecenas bibendum interdum dui sed finibus. Nulla facilisi. Vivamus eu gravida neque, et interdum odio. Maecenas ut fermentum ex, ac rhoncus libero. Aliquam porttitor magna a dignissim volutpat. Maecenas sed augue vel metus consectetur tristique. Vivamus tempor, est non ullamcorper efficitur, lorem tellus pharetra elit, sit amet scelerisque dui est eu orci. Donec non auctor massa, quis rhoncus urna. Nulla varius justo a dui ornare, at vestibulum orci luctus.</p>
</div>

<div class="section2">
    <h2>Second section - chapter 2</h2>
    <p>Donec congue, felis sit amet aliquam faucibus, mi mi ullamcorper ante, vitae aliquam neque leo eget felis. Donec odio sapien, dignissim vel ultricies vitae, vulputate fringilla augue. Vestibulum dictum pulvinar nibh, in cursus est maximus et. Sed diam tortor, sagittis in gravida non, scelerisque maximus ex. Integer varius consequat neque. Nunc tristique, orci vitae molestie dignissim, ante velit rhoncus massa, a vestibulum est nulla pretium lacus. Maecenas et nisi non leo pellentesque maximus. Maecenas vulputate leo purus, vel consequat quam auctor eu. Morbi est tortor, tincidunt in dapibus non, eleifend id justo. Donec eu gravida augue.</p>
</div>

<div id="third" class="section3">
    <h2>Third section - chapter 1</h2>
    <p>Donec sagittis dui vitae ex tincidunt sollicitudin sed vel arcu. In hac habitasse platea dictumst. Nunc mollis maximus magna, eu aliquam lorem varius ut. In dignissim ultricies quam, ac euismod eros euismod nec. Aenean pulvinar, eros non rhoncus egestas, lacus orci pretium est, eu mollis ante tellus eu tortor. Etiam aliquam nunc elementum congue consequat. Sed faucibus purus quis interdum porta. Aenean feugiat neque nec magna feugiat, id malesuada lacus tristique. Phasellus ut pretium tortor, vitae sollicitudin urna. Nulla augue urna, pharetra vel ullamcorper sed, accumsan sit amet justo.</p>
</div>

<div class="section3">
    <h2>Third section - chapter 2</h2>
    <p>Aenean rhoncus porttitor libero, at convallis sapien pellentesque in. Suspendisse dignissim elementum dui, at maximus dui eleifend id. Etiam venenatis faucibus est, vel egestas arcu efficitur vel. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin sagittis ex sed metus laoreet blandit.</p>
</div>

CSS：

.dots-nav {
    position: fixed;
    top: 40%;
    left: 3%;
        z-index: 9999;
}

.dots-nav ul,
.dots-nav li {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background: none;
        font-size: 16px;
        line-height: 20px;
        width: 100%;
}

.dots-nav li a {
    display: block;
    padding: 5px 10px;
    color: #000;
        white-space: nowrap;
}

.dots-nav ul li a::before {
    content: "\2022";
    color: #000;
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
    font-size: 1.5em;
        transition: transform 0.2s;
}

.dots-nav li:hover a::before {
        content: "\2022";
    color: #edcd31;
        transform: scale(1.5);
        padding-left: 0.09em;
}

.dots-nav li:active a::before {
        content: "\2022";
    color: #edcd31;
        transform: scale(1.5);
}

.dots-nav li a span {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.5s ease-in-out;
}

.dots-nav li:hover a span {
    visibility: visible;
    opacity: 1;
}

.dots-nav a.active::before {
        content: "\2022";
    color: #edcd31;
        transform: scale(1.5);
        padding-left: 0.09em;
}

.section1, .section2, .section3 {
    padding-left: 90px;
}

Javascript：

$(document).ready(function($){
      var parPosition = [];
    $('.section1').each(function() {
        parPosition.push($(this).offset().top);
    });
    
    $('a').click(function(){
        $('html, body').animate({
            scrollTop: $( $.attr(this, 'href') ).offset().top
        }, 500);
        return false;
    });
    
        $('.dots-nav ul li a').click(function () {
        $('.dots-nav ul li a').removeClass('active');
            $(this).addClass('active');
    }); 
    
       $(document).scroll(function(){
    var position = $(document).scrollTop(),
            index; 
            for (var i=0; i<parPosition.length; i++) {
            if (position <= parPosition[i]) {
                index = i;
                break;
            }
        }
  $('.dots-nav ul li a').removeClass('active');
        $('.dots-nav ul li a:eq('+index+')').addClass('active');
    });
    
        $('.dots-nav ul li a').click(function () {
        $('.dots-nav ul li a').removeClass('active');
            $(this).addClass('active');
    });   
});