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自定义事件及事件交互原理概述(一)
Feb 01 Javascript
javascript数组去重的六种方法汇总
Aug 16 Javascript
jquery validate.js表单验证入门实例(附源码)
Nov 10 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
May 13 Javascript
原生js实现自由拖拽弹窗代码demo
Jun 29 Javascript
原生js实现class的添加和删除简单代码
Jul 12 Javascript
javascript 正则表达式分组、断言详解
Apr 20 Javascript
canvas绘制爱心的几种方法总结(推荐)
Oct 31 Javascript
js动态引入的四种方法
May 05 Javascript
利用Node.js如何实现文件循环覆写
Apr 05 Javascript
JS原型和原型链原理与用法实例详解
Feb 05 Javascript
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 Vue.js
详解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
Windows中安装Apache2和PHP4权威指南
2006/11/18 PHP
php at(@)符号的用法简介
2009/07/11 PHP
php强制下载类型的实现代码
2011/04/21 PHP
PHP通过session id 实现session共享和登录验证的代码
2012/06/03 PHP
PHP日期函数date格式化UNIX时间的方法
2015/03/19 PHP
PHP中strcmp()和strcasecmp()函数字符串比较用法分析
2016/01/07 PHP
Zend Framework自定义Helper类相关注意事项总结
2016/03/14 PHP
PHP数学运算函数大汇总(经典值得收藏)
2016/04/01 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
改进:论坛UBB代码自动插入方式
2006/12/22 Javascript
javascript打印大全(打印页面设置/打印预览代码)
2013/03/29 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
2016/03/07 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
2016/04/26 Javascript
JSONP跨域请求
2017/03/02 Javascript
微信小程序 后台登录(非微信账号)实例详解
2017/03/31 Javascript
详解vue-cli 脚手架项目-package.json
2017/07/04 Javascript
Nodejs进阶之服务端字符编解码和乱码处理
2017/09/04 NodeJs
vue2配置scss的方法步骤
2019/06/06 Javascript
laydate只显示时分 不显示秒的功能实现方法
2019/09/28 Javascript
Vue根据条件添加click事件的方式
2019/11/09 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
2019/11/21 Javascript
基于JQuery实现页面定时弹出广告
2020/05/08 jQuery
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
2020/12/25 Vue.js
[01:04:06]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第一局
2016/02/26 DOTA
python3.X 抓取火车票信息【修正版】
2018/06/19 Python
pandas通过索引进行排序的示例
2018/11/16 Python
python检测IP地址变化并触发事件
2018/12/26 Python
关于python中plt.hist参数的使用详解
2019/11/28 Python
python处理RSTP视频流过程解析
2020/01/11 Python
python安装cx_Oracle和wxPython的方法
2020/09/14 Python
日本民宿预约平台:STAY JAPAN
2017/07/01 全球购物
性能测试工程师的面试题
2015/02/20 面试题
革命先烈的英雄事迹材料
2014/02/15 职场文书
爱国演讲稿500字
2014/05/04 职场文书
CSS3常见动画的实现方式
2021/04/14 HTML / CSS