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 instanceof 内部机制探析
Oct 15 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
Apr 06 Javascript
JavaScript实现MIPS乘法模拟的方法
Apr 17 Javascript
AngularJs bootstrap搭载前台框架——基础页面
Sep 01 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
Sep 17 Javascript
jquery实现input框获取焦点的简单实例
Jan 26 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
Mar 09 Javascript
JS实现图片旋转动画效果封装与使用示例
Jul 09 Javascript
浅谈Redux中间件的实践
Jul 27 Javascript
element-ui upload组件多文件上传的示例代码
Oct 17 Javascript
通过vue手动封装on、emit、off的代码详解
May 29 Javascript
Promise扫盲贴
Jun 24 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
使用sockets:从新闻组中获取文章(一)
2006/10/09 PHP
PHP+MySQL删除操作实例
2015/01/21 PHP
Ajax,UTF-8还是GB2312 eval 还是execScript
2008/11/13 Javascript
js 图片缩放(按比例)控制代码
2009/05/27 Javascript
js replace正则表达式应用案例讲解
2013/01/17 Javascript
将文本输入框内容加入表中的js代码
2013/08/18 Javascript
JavaScript显示当前文档最后修改日期的方法
2015/03/19 Javascript
js生成验证码并直接在前端判断
2015/05/15 Javascript
js实现网页多级级联菜单代码
2015/08/20 Javascript
jQuery生成假加载动画效果
2016/12/01 Javascript
基于MVC方式实现三级联动(JavaScript)
2017/01/23 Javascript
js 作用域和变量详解
2017/02/16 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
2017/05/25 Javascript
vue脚手架vue-cli的学习使用教程
2017/06/06 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
2018/03/09 Javascript
cdn模式下vue的基本用法详解
2018/10/07 Javascript
JavaScript类的继承操作实例总结
2018/12/20 Javascript
通过实例解析js可枚举属性与不可枚举属性
2020/12/02 Javascript
[01:39]2014DOTA2国际邀请赛 Newbee经理CU专访队伍火力全开
2014/07/15 DOTA
[10:21]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster 选手采访
2021/03/11 DOTA
python读取Kafka实例
2019/12/23 Python
python实现图像外边界跟踪操作
2020/07/13 Python
Envie de Fraise意大利:法国网上推出的孕妇装品牌
2020/10/18 全球购物
请描述一下”is a”关系和”has a”关系
2015/02/03 面试题
初中物理教学反思
2014/01/14 职场文书
洗发水广告词
2014/03/13 职场文书
质量承诺书范文
2014/03/27 职场文书
中学教师师德师风演讲稿
2014/08/22 职场文书
高中生军训感言
2015/08/01 职场文书
先进个人事迹材料(2016推荐版)
2016/03/01 职场文书
利用Python网络爬虫爬取各大音乐评论的代码
2021/04/13 Python
浅谈Laravel中使用Slack进行异常通知
2021/05/29 PHP
一篇文章带你深入了解Mysql触发器
2021/08/02 MySQL
SQL实现LeetCode(177.第N高薪水)
2021/08/04 MySQL
Mysql外键约束的创建与删除的使用
2022/03/03 MySQL