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 相关文章推荐
csdn 批量接受好友邀请
Feb 19 Javascript
JavaScript实现的一个日期格式化函数分享
Dec 06 Javascript
在JavaScript应用中实现延迟加载的方法
Jun 25 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
Jan 25 Javascript
javascript cookie基础应用之记录用户名的方法
Sep 20 Javascript
浅谈JavaScript的函数及作用域
Dec 30 Javascript
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
Mar 10 Javascript
详解Vue.directive 自定义指令
Mar 27 Javascript
微信小程序 select 下拉框组件功能
Sep 09 Javascript
浅谈Ant Design Pro 菜单自定义 icon
Nov 17 Javascript
JavaScript实现页面高亮操作提示和蒙板
Jan 04 Javascript
详解js创建对象的几种方式和对象方法
Mar 01 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!数据库
2008/05/03 PHP
php jquery 实现新闻标签分类与无刷新分页
2009/12/18 PHP
php获取数组中重复数据的两种方法
2013/06/28 PHP
对比分析php中Cookie与Session的异同
2016/02/19 PHP
php 函数中静态变量使用的问题实例分析
2020/03/05 PHP
php+js实现点赞功能的示例详解
2020/08/07 PHP
Javascript的闭包
2009/12/31 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
2013/01/22 Javascript
jQuery使用技巧简单汇总
2013/04/18 Javascript
node.js中的fs.truncate方法使用说明
2014/12/15 Javascript
jquery插件splitScren实现页面分屏切换模板特效
2015/06/16 Javascript
js中对函数设置默认参数值的3种方法
2015/10/23 Javascript
详细谈谈javascript的对象
2016/07/31 Javascript
微信开发 微信授权详解
2016/10/21 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
2017/03/13 Javascript
NodeJS使用七牛云存储上传文件的方法
2017/07/24 NodeJs
使用vue与jquery实时监听用户输入状态的操作代码
2017/09/19 jQuery
Angular中sweetalert弹框的基本使用教程
2018/07/22 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
2019/01/15 Javascript
[33:23]Secret vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python中logging模块的用法实例
2014/09/29 Python
Python smtplib实现发送邮件功能
2018/05/22 Python
Python多进程与服务器并发原理及用法实例分析
2018/08/21 Python
Python 正则表达式匹配字符串中的http链接方法
2018/12/25 Python
基于python框架Scrapy爬取自己的博客内容过程详解
2019/08/05 Python
Python *args和**kwargs用法实例解析
2020/03/02 Python
解决Jupyter notebook更换主题工具栏被隐藏及添加目录生成插件问题
2020/04/20 Python
3种适用于Python的疯狂秘密武器及原因解析
2020/04/29 Python
可自定义箭头样式的CSS3气泡提示框
2016/03/16 HTML / CSS
SmartBuyGlasses德国:购买太阳镜和眼镜
2019/08/20 全球购物
Sql面试题
2013/03/20 面试题
了解AppleTalk协议吗
2014/04/01 面试题
《花木兰》教学反思
2014/04/09 职场文书
征兵宣传标语
2014/06/20 职场文书
大学生联谊活动策划书(光棍节)
2014/10/10 职场文书
药品销售员2015年终工作总结
2015/10/22 职场文书