极客观点
项目管理
HarmonyOS
js中随着鼠标滚动的时候，导航栏有一条线长度也跟着变化，怎么实现呢？下面是我的代码，我想实现.nav中的after样式的width如何随着鼠标向上或者向下滚动时能变窄或者变宽？谢谢大神啦。
题目来源及自己的思路
相关代码
//
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml&...;>
<head>
<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 #eee;
text-align:center;
cursor:pointer;
}
ul{
width:1200px;
margin:0 auto;
}
.nav{
height:52px;
width:100%;
background:#f5f5f5;
}
.nav .cur{
background:#fff;
border-top:2px solid #1a92cf;
color:#1a92cf;
}
.fixed{
position:fixed;
top:0;
left:0;
}
a{
color:#505050;
}
.nav::after{content:'';min-height:10px;background-color:#ff7a59;bottom:1px;
width: 100%;float: left}
</style></head>
<body>
<br/><br/><br/><br/><br/><br/><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/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><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;i++){
if( scrollTop + a >= textChild[i].offsetTop){
for(var j=0;j<navBoxChild.length;j++){
navBoxChild[j].className = "";
}
navBoxChild[i].className = "cur";
}
}
};</script>
</body>
</html>
java