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 相关文章推荐
网络图片延迟加载实现代码 超越jquery控件
Mar 27 Javascript
Extjs中DisplayField的日期或者数字格式化扩展
Sep 03 Javascript
window.print打印指定div实例代码
Dec 13 Javascript
Javascript中的String对象详谈
Mar 03 Javascript
把jQuery的类、插件封装成seajs的模块的方法
Mar 12 Javascript
2则自己编写的jQuery特效分享
Feb 26 Javascript
Javascript实现飞动广告效果的方法
May 25 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
Feb 26 Javascript
koa上传excel文件并解析的实现方法
Aug 09 Javascript
javascript面向对象三大特征之多态实例详解
Jul 24 Javascript
Node 使用express-http-proxy 做api网关的实现
Oct 15 Javascript
JavaScript 生成唯一ID的几种方式
Feb 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
php 文件缓存函数
2011/10/08 PHP
PHPMailer发送HTML内容、带附件的邮件实例
2014/07/01 PHP
PHP批量生成图片缩略图的方法
2015/06/18 PHP
PHP生成唯一ID之SnowFlake算法
2016/12/17 PHP
总结的一些PHP开发中的tips(必看篇)
2017/03/24 PHP
PHP实现财务审核通过后返现金额到客户的功能
2019/07/04 PHP
JavaScript 学习笔记(九)call和apply方法
2010/01/11 Javascript
用innerhtml提高页面打开速度的方法
2013/08/02 Javascript
javascript对JSON数据排序的3个例子
2014/04/12 Javascript
JavaScript中的普通函数与构造函数比较
2015/04/07 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
2016/05/19 Javascript
前端js文件合并的三种方式推荐
2016/05/19 Javascript
浅谈jquery点击label触发2次的问题
2016/06/12 Javascript
jQuery实现动态添加tr到table的方法
2016/12/26 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
2017/07/12 Javascript
ionic选择多张图片上传的示例代码
2017/10/10 Javascript
Vue中遍历数组的新方法实例详解
2019/07/21 Javascript
Python查看微信撤回消息代码
2018/06/07 Python
Python实现的简单计算器功能详解
2018/08/25 Python
在Python中输入一个以空格为间隔的数组方法
2018/11/13 Python
Python 基于wxpy库实现微信添加好友功能(简洁)
2019/11/29 Python
Python3 main函数使用sys.argv传入多个参数的实现
2019/12/25 Python
PyQt5+python3+pycharm开发环境配置教程
2020/03/24 Python
python 图像判断,清晰度(明暗),彩色与黑白实例
2020/06/04 Python
Pycharm编辑器功能之代码折叠效果的实现代码
2020/10/15 Python
python+openCV对视频进行截取的实现
2020/11/27 Python
html5教程实现Photoshop渐变色效果
2013/12/04 HTML / CSS
澳大利亚连衣裙和女装在线:Esther
2017/11/11 全球购物
欧洲领先的火车票和大巴票预订平台:Trainline
2018/12/26 全球购物
老人祝寿主持词
2014/03/28 职场文书
梅花魂教学反思
2014/04/25 职场文书
促销活动计划书
2014/05/02 职场文书
浅谈MySQL 亿级数据分页的优化
2021/06/15 MySQL
教你用Python+selenium搭建自动化测试环境
2021/06/18 Python
vue中div禁止点击事件的实现
2022/04/02 Vue.js
Win11 Dev 预览版25174.1000发布 (附更新修复内容汇总)
2022/08/05 数码科技