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 相关文章推荐
利用js对象弹出一个层
Mar 26 Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
May 27 Javascript
js动态创建表格,删除行列的小例子
Jul 20 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
May 14 Javascript
原生的html元素选择器类似jquery选择器
Oct 15 Javascript
浅谈jQuery中的checkbox问题
Aug 10 Javascript
超全面的vue.js使用总结
Feb 12 Javascript
AngularJS 霸道的过滤器小结
Apr 26 Javascript
详解使用create-react-app快速构建React开发环境
May 16 Javascript
小程序getLocation需要在app.json中声明permission字段
Apr 04 Javascript
vue+element tabs选项卡分页效果
Jun 29 Javascript
Node.js操作MongoDB数据库实例分析
Jan 19 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
wordpress之wp-settings.php
2007/08/17 PHP
分享自定义的几个PHP功能函数
2015/04/15 PHP
laravel中命名路由的使用方法
2017/02/24 PHP
Javascript typeof 用法
2008/12/28 Javascript
javascript 表单的友好用户体现
2009/01/07 Javascript
javascript 禁用IE工具栏,导航栏等等实现代码
2013/04/01 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
2013/08/09 Javascript
JavaScript移除数组元素减少长度的方法
2013/09/05 Javascript
jquery text()方法取标签中的文本
2014/07/25 Javascript
js实现简单的联动菜单效果
2015/08/19 Javascript
js查看一个函数的执行时间实例代码
2015/09/12 Javascript
Nodejs实战心得之eventproxy模块控制并发
2015/10/27 NodeJs
javascript设计模式之模块模式学习笔记
2017/02/15 Javascript
AngularJS双向绑定和依赖反转实例详解
2017/04/15 Javascript
JS实现汉字与Unicode码相互转换的方法详解
2017/04/28 Javascript
AngularJS实现表格的增删改查(仅限前端)
2017/07/04 Javascript
js断点调试经验分享
2017/12/08 Javascript
vue引用js文件的多种方式(推荐)
2018/05/17 Javascript
Vue.js添加组件操作示例
2018/06/13 Javascript
详解Vue前端对axios的封装和使用
2019/04/01 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
2019/10/14 Javascript
js实现列表按字母排序
2020/08/11 Javascript
vue.js封装switch开关组件的操作
2020/10/26 Javascript
vue+element table表格实现动态列筛选的示例代码
2021/01/14 Vue.js
javascript实现点击产生随机图形
2021/01/25 Javascript
[03:42]2016国际邀请赛中国区预选赛首日现场玩家采访
2016/06/26 DOTA
Python实现FTP上传文件或文件夹实例(递归)
2017/01/16 Python
Python使用Turtle库绘制一棵西兰花
2019/11/23 Python
matplotlib基础绘图命令之bar的使用方法
2020/08/13 Python
python爬虫利用代理池更换IP的方法步骤
2021/02/21 Python
纯CSS3+DIV实现小三角形边框效果的示例代码
2020/08/03 HTML / CSS
使用phonegap创建联系人的实现方法
2017/03/30 HTML / CSS
中专毕业自我鉴定
2013/10/16 职场文书
挂靠协议书范本
2014/04/22 职场文书
工地门卫岗位职责范本
2014/07/01 职场文书
信用卡工资证明范本
2015/06/19 职场文书