javaScript实现滚动条事件详解


Posted in Javascript onMarch 24, 2020

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

javaScript实现滚动条事件详解

代码:

<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 class="cont"></div>

 </body>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 继承机制实例
Aug 12 Javascript
js 遍历对象的属性的代码
Dec 29 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
Jun 26 Javascript
详解jQuery uploadify文件上传插件的使用方法
Dec 16 Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
Mar 27 Javascript
js阻止默认右键的下拉菜单方法
Jan 02 Javascript
修改vue+webpack run build的路径方法
Sep 01 Javascript
JavaScript数组方法的错误使用例子
Sep 13 Javascript
vue根据值给予不同class的实例
Sep 29 Javascript
手淘flexible.js框架使用和源代码讲解小结
Oct 15 Javascript
详解小程序之简单登录注册表单验证
May 13 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
May 11 Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
Sep 27 #Javascript
深入掌握 react的 setState的工作机制
Sep 27 #Javascript
JavaScript 保护变量不被随意修改的实现代码
Sep 27 #Javascript
JavaScript实现打印星型金字塔功能实例分析
Sep 27 #Javascript
微信小程序 按钮滑动的实现方法
Sep 27 #Javascript
详解Vue-cli代理解决跨域问题
Sep 27 #Javascript
jQuery 利用ztree实现树形表格的实例代码
Sep 27 #jQuery
You might like
Apache PHP MySql安装配置图文教程
2016/08/27 PHP
PHP绕过open_basedir限制操作文件的方法
2018/06/10 PHP
使用laravel指定日志文件记录任意日志
2019/10/17 PHP
简洁Ajax函数处理(示例代码)
2013/11/15 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
2014/10/17 Javascript
DropDownList控件绑定数据源的三种方法
2016/12/24 Javascript
微信小程序-拍照或选择图片并上传文件
2017/01/06 Javascript
Angular HMR(热模块替换)功能实现方法
2018/04/04 Javascript
JS实现动态生成html table表格的方法分析
2018/07/11 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
2018/07/24 jQuery
vue使用swiper实现中间大两边小的轮播图效果
2019/11/24 Javascript
有趣的JavaScript隐式类型转换操作实例分析
2020/05/02 Javascript
Vue scoped及deep使用方法解析
2020/08/01 Javascript
用Python的Django框架来制作一个RSS阅读器
2015/07/22 Python
用Python解决计数原理问题的方法
2016/08/04 Python
python逆序打印各位数字的方法
2018/06/25 Python
Windows下Anaconda2安装NLTK教程
2018/09/19 Python
django项目搭建与Session使用详解
2018/10/10 Python
python使用magic模块进行文件类型识别方法
2018/12/08 Python
使用PYTHON解析Wireshark的PCAP文件方法
2019/07/23 Python
深入浅析Python 中的sklearn模型选择
2019/10/12 Python
Python类继承和多态原理解析
2020/02/05 Python
python numpy--数组的组合和分割实例
2020/02/24 Python
python爬虫请求头设置代码
2020/07/28 Python
Three Graces London官网:英国奢侈品牌
2021/03/18 全球购物
JPA面试常见问题
2016/11/14 面试题
药品营销专业毕业生自荐信
2014/07/02 职场文书
好的促销活动方案
2014/08/21 职场文书
公务员保密工作承诺书
2015/05/04 职场文书
检讨书格式
2015/05/07 职场文书
办公用品管理制度
2015/08/04 职场文书
追悼会答谢词范文
2015/09/29 职场文书
公文写作:教你写“建议书”
2019/05/07 职场文书
python3+PyQt5+Qt Designer实现界面可视化
2021/06/10 Python
MongoDB误操作后使用oplog恢复数据
2022/04/11 MongoDB
Nginx HTTP跳转至HTTPS
2022/05/15 Servers