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 getElementsByClassName实现代码
Oct 11 Javascript
JS date对象的减法处理实现代码
Dec 28 Javascript
基于jquery的返回顶部效果(兼容IE6)
Jan 17 Javascript
JS的replace方法介绍
Oct 20 Javascript
avalonjs实现仿微博的图片拖动特效
May 06 Javascript
JavaScript动态提示输入框输入字数的方法
Jul 27 Javascript
js删除局部变量的实现方法
Jun 25 Javascript
常用的几个JQuery代码片段
Mar 13 Javascript
vue-swiper的使用教程
Aug 30 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
Oct 24 Javascript
Vue2.x通用编辑组件的封装及应用详解
May 28 Javascript
JS实现简单日历特效
Jan 03 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
Discuz 5.0 中读取纯真IP数据库函数分析
2007/03/16 PHP
九个你必须知道而且又很好用的php函数和特点
2013/08/08 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
javascript网页关键字高亮代码
2008/07/30 Javascript
web前端开发JQuery常用实例代码片段(50个)
2015/08/28 Javascript
解决JS无法调用Controller问题的方法
2015/12/31 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
2016/01/19 Javascript
让编辑器支持word复制黏贴、截屏的js代码
2016/10/17 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
2019/08/27 Javascript
vue+Element-ui前端实现分页效果
2020/11/15 Javascript
如何在 Vue 中使用 JSX
2021/02/14 Vue.js
[50:11]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第三场
2018/04/09 DOTA
[08:54]DOTA2-DPC中国联赛 正赛 Aster vs LBZS 选手采访
2021/03/11 DOTA
python选择排序算法实例总结
2015/07/01 Python
python中input()与raw_input()的区别分析
2016/02/27 Python
利用python生成一个导出数据库的bat脚本文件的方法
2016/12/30 Python
python如何读写json数据
2018/03/21 Python
CentOS6.9 Python环境配置(python2.7、pip、virtualenv)
2019/05/06 Python
Python 微信爬虫完整实例【单线程与多线程】
2019/07/06 Python
win10下python3.8的PIL库安装过程
2020/06/08 Python
Django 构建模板form表单的两种方法
2020/06/14 Python
Python Flask异步发送邮件实现方法解析
2020/08/01 Python
Python使用socket_TCP实现小文件下载功能
2020/10/09 Python
Python 爬取淘宝商品信息栏目的实现
2021/02/06 Python
HTML5的革新 结构之美
2011/06/20 HTML / CSS
iKRIX意大利网上商店:男女豪华服装和配件
2019/10/09 全球购物
学生请假条
2014/04/11 职场文书
乡镇2014法制宣传日活动总结
2014/11/01 职场文书
神秘岛读书笔记
2015/07/01 职场文书
安全生产会议制度
2015/08/06 职场文书
家庭教育教师培训学习体会
2016/01/14 职场文书
《扇形统计图》教学反思
2016/02/17 职场文书
八年级数学教学反思
2016/02/17 职场文书
MySQL一些常用高级SQL语句
2021/07/03 MySQL
JavaScript实现队列结构过程
2021/12/06 Javascript
利用JuiceFS使MySQL 备份验证性能提升 10 倍
2022/03/17 MySQL