激活标签切换以使用 pushState？

问：

我有一个单页网站，我在导航上使用 ACTIVE 类来突出显示导航中的链接。

使导航链接处于活动状态的 javascript：

$(document).ready(function () {
    $('.inner-nav li a').click(function(e) {

        $('.inner-nav li.active').removeClass('active');

        var $parent = $(this).parent();
        $parent.addClass('active');
        e.preventDefault();
    });
});

window.onscroll = () => {
    var current = "parent";

    sections.forEach((page-section) => {
        const sectionTop = section.offsetTop;
        if (pageYOffset >= sectionTop ) {
        current = section.getAttribute("main"); }
    });

    navLi.forEach((li) => {
        li.classList.remove("active");
        if (li.classList.contains(current)) {
        li.classList.add("active");
        }
    });
};

资产净值 html：

<div class="inner-nav desktop-nav">
    <ul class="clearlist scroll-nav local-scroll">
        <li class="active"><a href="#home" onclick="ChangeUrl('Home', '/');">Home</a></li>
        <li><a href="#about" onclick="ChangeUrl('About', '/about');">About</a></li>
        <li><a href="#features" onclick="ChangeUrl('Features', '/features');">Features</a></li>
        <li><a href="#news" onclick="ChangeUrl('Blog', '/blog');">Blog</a></li>
        <li><a href="#mail-list" onclick="ChangeUrl('Newsletter', '/newsletter');">Newsletter</a></li>
    </ul>
</div>

这是 pushState 的 js。

function ChangeUrl(title, url) {
    if (typeof (history.pushState) != "undefined") {
        var obj = { Title: title, Url: url };
        history.pushState(obj, obj.Title, obj.Url);
    } else {
        alert("Browser does not support HTML5.");
    }
}

我正在尝试达到当您向下滚动时 pushState 将更改地址栏中的 URL 以匹配它所在的部分的位置。

例如：

如果我单击导航中的“关于”，它会突出显示“关于”，并在 URL 末尾添加 /about。

但是，当我向下滚动到“关于”部分时，“关于”链接会突出显示，但不会将 /about 添加到地址栏中的 URL。

有什么JS魔力可以使它工作吗？