qq_34571911 2021-08-27 14:02 采纳率: 80%
浏览 198
已结题

原生javascript如果给li加上一个id

原生javascript如何实现，

  • 当屏幕滚动到距离顶部 topbox这个div 超过2300px的距离时给
  • 自动加多一个id 变成
  • ，反之如果不超过2300px的距离时则取消j加的这个id名

    
 <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>
  • 写回答

2条回答 默认 最新

  • qq_17585675 2021-08-27 14:33
    关注
    
<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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 9月4日
  • 已采纳回答 8月27日
  • 赞助了问题酬金 8月27日
  • 创建了问题 8月27日

悬赏问题

  • ¥15 java代码写在记事本上后在cmd上运行时无报错但又没生成文件
  • ¥15 关于#python#的问题：在跑ldsc数据整理的时候一直抱这种错误，要么--out识别不了参数，要么--merge-alleles识别不了参数(操作系统-linux)
  • ¥15 PPOCRLabel
  • ¥15 混合键合键合机对准标识
  • ¥100 现在不懂的是如何将当前的相机中的照片,作为纹理贴图,映射到扫描出的模型上
  • ¥15 魔霸ROG7 pro,win11.息屏后会显示黑屏,如图，如何解决？(关键词-重新启动)
  • ¥15 有没有人知道这是哪里出了问题啊？要怎么改呀？
  • ¥200 C++表格文件处理-悬赏
  • ¥15 Windows Server2016本地登录失败
  • ¥15 复合卡卡号轨道写入芯片卡