js, when the mouse scrolls, the length of a line in the navigation bar also changes. How can it be realized? Here is my code, and I want to implement the after-style width in nav. How can it narrow or widen as the mouse scrolls up or down? Thank you, God.

sources of topics and their own ideas

related codes

/ /

http://www.w3.org/1999/xhtml&.;>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tab</title>
<style>
    *{
        list-style:none;
        margin:0;
        padding:0;
        text-decoration:none;
        font-family:"Microsoft YaHei";

    }
    li{
        width:100px;
        height:50px;
        line-height:50px;
        float:left;
        border-right:2px solid -sharpeee;
        text-align:center;
        cursor:pointer;
    }
    ul{
        width:1200px;
        margin:0 auto;
    }
    .nav{
        height:52px;
        width:100%;
        background:-sharpf5f5f5;
    }
    .nav .cur{
        background:-sharpfff;
        border-top:2px solid -sharp1a92cf;
        color:-sharp1a92cf;
    }
    .fixed{
        position:fixed;
        top:0;
        left:0;
    }
    a{
        color:-sharp505050;
    }
    .nav::after{content:"";min-height:10px;background-color:-sharpff7a59;bottom:1px;
       width: 100%;float: left}
</style>

< / head >
< body >
< br/ >
< div class= "nav" id= "nav-container" >

<ul id="nav-box">`
    <li class="cur">text1-nav</li>
    <li>text2-nav</li>
    <li>text3-nav</li>
</ul>

< / div >
< div id= "text" >

<div style="width:100%;height:500px;background:green;text-align:center;">text1</div>
<div style="width:100%;height:500px;background:yellow;text-align:center;">text2</div>
<div style="width:100%;height:500px;background:blue;text-align:center;">text3</div>

< / div >
< br/ > < br/ > br/ > < br/ > < br/ > br/ > < br/

< script >

var navContainer = document.getElementById("nav-container");
var navBox = document.getElementById("nav-box");
var text = document.getElementById("text");
var navBoxChild = navBox.children;
var textChild = text.children;
var num = navContainer.offsetTop;
var a = navContainer.offsetHeight;
window.onscroll = function(){
    var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
    if(scrollTop >= num){
        navContainer.className = "nav fixed";
        text.style.paddingTop = a +"px";
    }else{
        navContainer.className = "nav";
        text.style.paddingTop = "";
    }
    //
    //method1

var navb=document.getElementsByTagName("nav")
    
    for(var i=0;i<navBoxChild.length;iPP){
        if( scrollTop + a >= textChild[i].offsetTop){
            for(var j=0;j<navBoxChild.length;jPP){
                navBoxChild[j].className = "";
            }
            navBoxChild[i].className = "cur";
        }
    }
};

< / script >
< / body >
< / html >

I want to know how the after-style width in Nav narrows or widens as the mouse scrolls up or down. Thank you for your advice.