id在视口中时突出显示菜单项

Question

我试图在相应的ID到达页面顶部时突出显示菜单项，但是我似乎无法使代码正常工作。我想我知道这个问题-但我不知道如何解决。

我认为问题出在将ID添加到链接的最后一行。问题是我的链接具有页面名称，而不仅仅是“＃”，因此到达页面顶部时不匹配。

那么我怎么说呢＃后面加上ID，但链接文本要放在它前面（每次都会不同）？

$('.navDropdownList a').on('click', function() {
	'use strict';
    $(this).find('a').removeClass('active');
    $(this).addClass('active');
});

$(window).on('scroll', function() {
	'use strict';
    $('.target').each(function() {
        if($(window).scrollTop() >= $(this).position().top) {
            var id = $(this).attr('id');
            $('.navDropdownList a').removeClass('active');
            $('.navDropdownList a[href=#'+ id +']').addClass('active');
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="navDropdownList">
  <li><a class="closeMobNav" href="thisIsThePage.html#section-1">Link text</a></li>
  <li><a class="closeMobNav" href="thisIsAnotherPage.html#section-2">Link text</a></li>
  <li><a class="closeMobNav" href="yetAnotherPage.html#section-3"><span>3.1</span>Link text</a></li>
</ul>


<section>
  <h2 class="target" id="section-1">Title</h2>
  <p>blar blar blar</p>
</section>
<section>
  <h2 class="target" id="section-2">Title</h2>
  <p>blar blar blar</p>
</section>
<section>
  <h2 class="target" id="section-3">Title</h2>
  <p>blar blar blar</p>
</section>