导航栏中的导航栏处于活动状态

Question

我正在使用导航栏，它可以正常工作，并且在单击时会更改其活动类并显示该部分。.但是导航栏活动类在滚动时不会自动更新，仅在单击时可用。我还希望它自动滚动更改其活动类。。由于我不擅长JS，所以不能使其那样工作。但是如果有人可以帮助我，我将非常感谢。

这是我的HTML和JS代码

HTML

<nav class="navbar navbar-expand-lg navbar-mainbg shadow animated fadeInDown delay-1s">
<div class="container">
    <a class="navbar-brand navbar-logo" href="#"><img src="_assets/img/logo.png"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <i class="fa fa-bars text-white"></i>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto">
            <div class="hori-selector"><div class="left"></div><div class="right"></div></div>
            <li class="nav-item active">
                <a class="nav-link" href="#"><i class="fa fa-home" aria-hidden="true"></i>Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#about"><i class="fa fa-info" aria-hidden="true"></i></i>About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#features"><i class="fa fa-tint"></i>Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#vip"><i class="fa fa-star"></i>VIP</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="../forums"><i class="fa fa-comment"></i>Forums</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="../ucp"><i class="fa fa-users"></i>UCP</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="../donate"><i class="fa fa-paypal"></i>Donate</a>
            </li>
        </ul>
    </div>
</div>

JS

function test(){
var tabsNewAnim = $('#navbarSupportedContent');
var selectorNewAnim = $('#navbarSupportedContent').find('li').length;
var activeItemNewAnim = tabsNewAnim.find('.active');
var activeWidthNewAnimHeight = activeItemNewAnim.innerHeight();
var activeWidthNewAnimWidth = activeItemNewAnim.innerWidth();
var itemPosNewAnimTop = activeItemNewAnim.position();
var itemPosNewAnimLeft = activeItemNewAnim.position();
$(".hori-selector").css({
    "top":itemPosNewAnimTop.top + "px",
    "left":itemPosNewAnimLeft.left + "px",
    "height": activeWidthNewAnimHeight + "px",
    "width": activeWidthNewAnimWidth + "px"
});
$("#navbarSupportedContent").on("click","li",function(e){
    $('#navbarSupportedContent ul li').removeClass("active");
    $(this).addClass('active');
    var activeWidthNewAnimHeight = $(this).innerHeight();
    var activeWidthNewAnimWidth = $(this).innerWidth();
    var itemPosNewAnimTop = $(this).position();
    var itemPosNewAnimLeft = $(this).position();
    $(".hori-selector").css({
        "top":itemPosNewAnimTop.top + "px",
        "left":itemPosNewAnimLeft.left + "px",
        "height": activeWidthNewAnimHeight + "px",
        "width": activeWidthNewAnimWidth + "px"
    });
});}

$(document).ready(function(){
setTimeout(function(){ test(); }); });

$(window).on('resize', function(){
setTimeout(function(){ test(); }, 500); });

$(".navbar-toggler").click(function(){
setTimeout(function(){ test(); }); });

如果需要，我还可以提供CSS代码。