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 >