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 编写规范
Mar 03 Javascript
js实现上传图片之上传前预览图片
Mar 25 Javascript
JavaScript中window、doucment、body的解释
Aug 14 Javascript
JavaScript中Object.prototype.toString方法的原理
Feb 24 Javascript
AngularJS 入门教程之事件处理器详解
Aug 19 Javascript
JS创建对象的写法示例
Nov 04 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
详解基于Bootstrap+angular的一个豆瓣电影app
Jun 26 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
May 21 Javascript
详解如何webpack使用DllPlugin
Sep 30 Javascript
原生javascript制作的拼图游戏实现方法详解
Feb 23 Javascript
vue的hash值原理也是table切换实例代码
Dec 14 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
解析PHP中empty is_null和isset的测试
2013/06/29 PHP
ThinkPHP路由详解
2015/07/27 PHP
PHP实现通过URL提取根域名
2016/03/31 PHP
phpcms中的评论样式修改方法
2016/10/21 PHP
屏蔽F1~F12的快捷键的js函数
2010/05/06 Javascript
jquery load()在firefox(火狐)下显示不正常的解决方法
2011/04/05 Javascript
基于jquery的滚动条滚动固定div(附演示下载)
2012/10/29 Javascript
jquery实现一个简单好用的弹出框
2014/09/26 Javascript
Webpack框架核心概念(知识点整理)
2017/12/22 Javascript
vue项目关闭eslint校验
2018/03/21 Javascript
js使用formData实现批量上传
2020/03/27 Javascript
微信小程序tabbar底部导航
2018/11/05 Javascript
node.js使用http模块创建服务器和客户端完整示例
2020/02/10 Javascript
如何通过vscode运行调试javascript代码
2020/07/24 Javascript
vue实现移动端项目多行文本溢出省略
2020/07/29 Javascript
原生JS实现弹幕效果的简单操作指南
2020/11/10 Javascript
python base64 decode incorrect padding错误解决方法
2015/01/08 Python
wxPython中listbox用法实例详解
2015/06/01 Python
Flask框架响应、调度方法和蓝图操作实例分析
2018/07/24 Python
Selenium定时刷新网页的实现代码
2018/10/31 Python
Python生成指定数量的优惠码实操内容
2019/06/18 Python
在python中实现同行输入/接收多个数据的示例
2019/07/20 Python
python实现数据清洗(缺失值与异常值处理)
2019/12/02 Python
django实现HttpResponse返回json数据为中文
2020/03/27 Python
python 实现单例模式的5种方法
2020/09/23 Python
Django-silk性能测试工具安装及使用解析
2020/11/28 Python
通过一张图教会你CSS3倒影的实现
2017/09/26 HTML / CSS
英国最大的香水商店:The Fragrance Shop
2018/07/06 全球购物
Foot Locker加拿大官网:美国知名运动产品零售商
2019/07/21 全球购物
马来西亚在线购物市场:PGMall.my
2019/10/13 全球购物
思想专业自荐信范文
2013/12/25 职场文书
大学军训感言
2014/01/10 职场文书
模范家庭事迹材料
2014/02/10 职场文书
高中生操行评语大全
2014/04/25 职场文书
初三学生语文考试作弊检讨书
2014/12/14 职场文书
先进党支部申报材料
2014/12/24 职场文书