这篇文章主要为大家详细介绍了javaScript实现条事件的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js实现条事件的具体代码,供大家参考,具体内容如下

代码:

<html>

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <title></title>

  <style>
   body {
    margin: 0;
    padding: 0;
   }

   .cont {
    height: 7000px;
   }

   #top {
    position: fixed;
    width: 100%;
    height: 55px;
    top: 0px;
    left: 0px;
    background-color: rosybrown;
    display: none;
   }

   #left {
    position: fixed;
    width: 50px;
    height: 400px;
    top: 150px;
    left: 50px;
    background-color: cadetblue;
    display: none;
   }

   #left ul {
    list-style: none;
    padding-left: 0px;
   }

   #left ul li {
    border: 1px solid white;
    /*color: azure;*/
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin: 15px auto;
    /*display: none;*/
   }

   .a {
    background-color: burlywood;
    color: #FFFFFF;
   }
  </style>

  <script>
   //事件
   function myScroll() {

    var i = document.body.scrollTop;
    var top = document.getElementById("top");
    var left = document.getElementById("left");
    var f1 = document.getElementById("f1");
    var f2 = document.getElementById("f2");
    var f3 = document.getElementById("f3");
    var f4 = document.getElementById("f4");
    var f5 = document.getElementById("f5");
    var f6 = document.getElementById("f6");

    //控制顶部
    if(i >= 1000) {
     top.style.display = "block";
     top.innerHTML = i;
    } else {
     top.style.display = "none";
    }

    //控制左侧
    if(i >= 2000) {
     left.style.display = "block";
    } else {
     left.style.display = "none";
    }

    //显示楼层

    if(i >= 2000 && i <= 2500) {
     f1.className = "a";
     f2.className = "";
     f3.className = "";
     f4.className = "";
     f5.className = "";
     f6.className = "";
    } else if(i > 2500 && i <= 3000) {
     f1.className = "";
     f2.className = "a";
     f3.className = "";
     f4.className = "";
     f5.className = "";
     f6.className = "";
    } else if(i > 3000 && i <= 3500) {
     f1.className = "";
     f2.className = "";
     f3.className = "a";
     f4.className = "";
     f5.className = "";
     f6.className = "";
    } else if(i > 3500 && i <= 4000) {
     f1.className = "";
     f2.className = "";
     f3.className = "";
     f4.className = "a";
     f5.className = "";
     f6.className = "";
    } else if(i > 4000 && i <= 4500) {
     f1.className = "";
     f2.className = "";
     f3.className = "";
     f4.className = "";
     f5.className = "a";
     f6.className = "";
    } else if(i > 4500 && i <= 5000) {
     f1.className = "";
     f2.className = "";
     f3.className = "";
     f4.className = "";
     f5.className = "";
     f6.className = "a";
    }

   }
  </script>

 </head>

 <body onscroll="myScroll()">
  <div id="left">
   <ul>
    <li id="f1">1F</li>
    <li id="f2">2F</li>
    <li id="f3">3F</li>
    <li id="f4">4F</li>
    <li id="f5">5F</li>
    <li id="f6">6F</li>

   </ul>

  </div>
  <div id="top"></div>
  <div></div>

 </body>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持爱安网。

最新资讯
R16标准冻结 5G从能用变好用

R16标准冻结 5G从能用

R16标准(Release 16)冻结,这意味着各厂商可依据该标准进
新·四夸克

新·四夸克

最近,欧洲核子研究中心(CERN)的LHCb合作小组宣布了一项新
纪源资本符绩勋:科创板最大创新放开利润要求

纪源资本符绩勋:科创板

谈到对科创板的建议,符绩勋认为,最重要的建议就是希望科
爱立信中国总裁赵钧陶:5G时代中国依然会引领全球发展

爱立信中国总裁赵钧陶

爱立信中国总裁赵钧陶表示,爱立信对中国5G市场报有比较
潮汐锁定星球的“中间地带”可能孕育生命形式

潮汐锁定星球的“中间

潮汐锁定的星球非常特殊,一侧永远是白天,另一侧永远是夜
新模型揭示地磁场变化速率比预计的快10倍

新模型揭示地磁场变化

在近期的新研究中,科学家通过模拟显示了10万年以来地磁
最新文章
Vue实现图片与文字混输效果

Vue实现图片与文字混

用多了 JQuery ,习惯了使用JQuery的API操作 DOM ,几乎忘
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)

Vue实现点击当前元素

这篇文章主要介绍了Vue实现点击当前元素以外的地方隐
Vue实现验证码功能

Vue实现验证码功能

这篇文章主要为大家详细介绍了Vue实现验证码功能,文中
JS实现的雪花飘落特效示例

JS实现的雪花飘落特效

这篇文章主要介绍了JS实现的雪花飘落特效,结合实例形
微信小程序实现图片压缩

微信小程序实现图片压

这篇文章主要为大家详细介绍了微信小程序实现图片压缩
JavaScript实现京东放大镜效果

JavaScript实现京东放

这篇文章主要为大家详细介绍了JavaScript实现京东放大