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 在线压缩和格式化收藏
Jan 16 Javascript
javascript 选择文件夹对话框(web)
Jul 07 Javascript
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
Oct 24 Javascript
window.onload和$(function(){})的区别介绍
Oct 30 Javascript
JQuery调用WebServices的方法和4个实例
May 06 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
Jun 17 Javascript
原生js实现放大镜效果
Jan 11 Javascript
BootStrap select2 动态改变值的方法
Feb 10 Javascript
Bootstrap面板(Panels)的简单实现代码
Mar 17 Javascript
vue.js开发环境安装教程
Mar 17 Javascript
Vue computed 计算属性代码实例
Apr 22 Javascript
nuxt 实现在其它js文件中使用store的方式
Nov 05 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
js 数组操作代码集锦
2009/04/28 Javascript
juqery 学习之三 选择器 层级 基本
2010/11/25 Javascript
Javascript学习笔记-详解in运算符
2011/09/13 Javascript
TimergliderJS 一个基于jQuery的时间轴插件
2011/12/07 Javascript
{}与function(){}选用空对象{}来存放keyValue
2012/05/23 Javascript
把input初始值不写value的具体实现方法
2013/07/04 Javascript
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
2013/09/10 Javascript
jQuery中toggle()函数的使用实例
2015/04/17 Javascript
jQuery实现仿百度帖吧头部固定导航效果
2015/08/07 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
2016/05/18 Javascript
全面了解addEventListener和on的区别
2016/07/14 Javascript
js实现下拉菜单效果
2017/03/01 Javascript
jQuery实现上传图片前预览效果功能
2017/08/03 jQuery
浅谈React组件之性能优化
2018/03/02 Javascript
解决nodejs的npm命令无反应的问题
2018/05/17 NodeJs
在angularJs中进行数据遍历的2种方法
2018/10/08 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
2020/04/22 Javascript
Python中zip()函数用法实例教程
2014/07/31 Python
Windows和Linux下Python输出彩色文字的方法教程
2017/05/02 Python
利用python获取当前日期前后N天或N月日期的方法示例
2017/07/30 Python
Python读取Json字典写入Excel表格的方法
2018/01/03 Python
python 字符串和整数的转换方法
2018/06/25 Python
Python3 合并二叉树的实现
2019/09/30 Python
Python爬虫防封ip的一些技巧
2020/08/06 Python
HTML5和CSS3让网页设计提升到下一个高度
2009/08/14 HTML / CSS
美国最大的高尔夫发球时间预订网站:TeeOff.com
2018/03/28 全球购物
与世界上最好的跑步专业品牌合作:Fleet Feet
2019/03/22 全球购物
Juice Beauty官网:有机美容产品,护肤与化妆品
2020/06/13 全球购物
C#如何判断当前用户是否输入某个域
2015/12/07 面试题
办理暂住证介绍信
2014/01/11 职场文书
同事打架检讨书
2014/02/04 职场文书
教师群众路线心得体会
2014/11/04 职场文书
2015年五四青年节演讲稿
2015/03/18 职场文书
2015中学教师个人工作总结
2015/07/22 职场文书
浅谈redis缓存在项目中的使用
2021/05/20 Redis
科学家测试在太空中培育人造肉,用于未来太空旅行
2022/04/29 数码科技