原生javascript如何实现,
<style type="text/css">
body{height:6000px;display:block;width:100%;}
.topbox {
width: 1000px;
height: 100px;
margin: 0 auto;
background-color: #ccc;
}
.leftNav {
position: fixed;
top:200px;
left: 10px;
width: 60px;
}
.leftNav ul {
list-style: none;
}
.leftNav ul li {
width: 60px;
height: 60px;
background-color: #ccc;
}
.leftNav ul li a {
display: block;
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
text-decoration: none;
font-size: 14px;
}
</style>
<body>
<div class="topbox"></div>
<div class="leftNav" id="Nasdav">
<ul>
<li>
<a href="javascript:;" class="number">1F</a>
</li>
<li>
<a href="javascript:;" class="number">2F</a>
</li>
<li class="abc">
<a href="javascript:;" class="number">3F</a>
</li>
</li>
</ul>
</div>
</body>
<script type="text/javascript">
//添加滚动事件
window.addEventListener("scroll",function(e){
var t =document.documentElement.scrollTop||document.body.scrollTop;
console.log(t)
if(t > 2400 ){
//超过2400加上Id
if(document.getElementsByClassName("abc")[0].id==""){
document.getElementsByClassName("abc")[0].setAttribute("id","bbc")
}
}else{
//小于2400去掉ID
if(document.getElementsByClassName("abc")[0].id!=""){
document.getElementsByClassName("abc")[0].removeAttribute("id")
}
}
});
</script>
原生javascript如何实现,
当屏幕滚动到距离顶部 topbox这个div 超过2300px的距离时给
<li class="abc">
自动加多一个id 变成
```html
<li class="abc"id="bbc">
```
,反之如果不超过2300px的距离时则取消j加的这个id名