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实现unicode和字符的互相转换
Jul 18 Javascript
jQuery之$(document).ready()使用介绍
Apr 05 Javascript
跨浏览器的事件对象介绍
Jun 27 Javascript
基于jquery的文章中所有图片width大小批量设置方法
Aug 01 Javascript
Node.js的特点和应用场景介绍
Nov 04 Javascript
Jquery Mobile 自定义按钮图标
Nov 18 Javascript
在AngularJS框架中处理数据建模的方式解析
Mar 05 Javascript
AngularJS中的拦截器实例详解
Apr 07 Javascript
JS实现的邮箱提示补全效果示例
Jan 30 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
Mar 28 Javascript
微信小程序使用npm支持踩坑
Nov 07 Javascript
js获取 gif 的帧数的代码实例
Sep 10 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
咖啡豆的最常见发酵处理方法,详细了解一下
2021/03/03 冲泡冲煮
smarty基础之拼接字符串的详解
2013/06/18 PHP
PHP实现的多文件上传类及用法示例
2016/05/06 PHP
PHPExcel中文帮助手册|PHPExcel使用方法(分享)
2017/06/09 PHP
PHP后门隐藏的一些技巧总结
2020/11/04 PHP
jQuery 验证插件 Web前端设计模式(asp.net)
2010/10/17 Javascript
导入extjs、jquery 文件时$使用冲突问题解决方法
2014/01/14 Javascript
javascript移出节点removeChild()使用介绍
2014/04/03 Javascript
jquery控制select的text/value值为选中状态
2014/06/03 Javascript
javascript强制点击广告的方法
2015/02/06 Javascript
JQuery实现带排序功能的权限选择实例
2015/05/18 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
2015/12/04 Javascript
JS实现的在线调色板实例(附demo源码下载)
2016/03/01 Javascript
Extjs表单输入框异步校验的插件实现方法
2017/03/20 Javascript
详解vue express启动数据服务
2017/07/05 Javascript
Nodejs之TCP服务端与客户端聊天程序详解
2017/07/07 NodeJs
微信小程序下拉刷新界面的实现
2017/09/28 Javascript
vue elementui tree 任意级别拖拽功能代码
2020/08/31 Javascript
python进阶教程之循环相关函数range、enumerate、zip
2014/08/30 Python
Python中的is和id用法分析
2015/01/26 Python
Python字符串逐字符或逐词反转方法
2015/05/21 Python
六行python代码的爱心曲线详解
2019/05/17 Python
Pycharm保存不能自动同步到远程服务器的解决方法
2019/06/27 Python
Python scipy的二维图像卷积运算与图像模糊处理操作示例
2019/09/06 Python
浅谈PyTorch中in-place operation的含义
2020/06/27 Python
如何使用Cython对python代码进行加密
2020/07/08 Python
CSS3结构性伪类选择器九种写法
2012/04/18 HTML / CSS
html2canvas生成的图片偏移不完整的解决方法
2020/05/19 HTML / CSS
京东奢侈品:全球奢侈品牌
2018/03/17 全球购物
信息技术教学反思
2014/02/12 职场文书
2014广电局实施党的群众路线教育实践活动方案思想汇报
2014/09/22 职场文书
死者家属慰问信
2015/03/24 职场文书
行政申诉状范文
2015/05/20 职场文书
主婚人致辞精选
2015/07/28 职场文书
医务人员岗前培训心得体会
2016/01/08 职场文书
python 安全地删除列表元素的方法
2022/03/16 Python