这篇文章主要为大家详细介绍了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>

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

最新资讯
马斯克2018年领了多少工资?153亿元!

马斯克2018年领了多少

特斯拉CEO埃隆·马斯克2018年整体薪资为22.8亿美元,几
这是真的,大脑死亡四小时后,又被这群科学家复活了

这是真的,大脑死亡四小

4月18日,Nature封面重磅发布耶鲁大学最新研究:猪大脑在
避免伦理争议?科学家在子宫里矫正胚胎致命基因突变

避免伦理争议?科学家在

本周,最新一期《科学》子刊《Science Translational Me
虫洞不能让你回到过去,但可用来躲避星际战争

虫洞不能让你回到过去

如果外星人之间发生星际战争,而地球人打不过外星人,那么
特斯拉缩减董事会成员 马斯克的三个盟友将离开

特斯拉缩减董事会成员

特斯拉表示,将在今明两年把董事会从11名董事缩减至7名,
欧洲消费者组织敦促监管机构对Facebook展开联合审查

欧洲消费者组织敦促监

欧洲消费者组织BEUC敦促欧盟反垄断监管机构和隐私保护
最新文章
JavaScript解析及序列化JSON的方法实例分析

JavaScript解析及序列

这篇文章主要介绍了JavaScript解析及序列化JSON的方法
如何为vuex实现带参数的 getter和state.commit

如何为vuex实现带参数

这篇文章主要介绍了如何为vuex实现带参数的getter和st
使用VUE+iView+.Net Core上传图片的方法示例

使用VUE+iView+.Net C

这篇文章主要介绍了使用VUE+iView+.Net Core上传图片
JS实现的获取银行卡号归属地及银行卡类型操作示例

JS实现的获取银行卡号

这篇文章主要介绍了JS实现的获取银行卡号归属地及银行
Angular6 用户自定义标签开发的实现方法

Angular6 用户自定义

这篇文章主要介绍了Angular6 用户自定义标签开发的实
React 实现拖拽功能的示例代码

React 实现拖拽功能的

这篇文章主要介绍了React 实现拖拽功能的示例代码,小编