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 相关文章推荐
麻雀虽小五脏俱全 Dojo自定义控件应用
Sep 04 Javascript
jquery对表单操作2
Apr 06 Javascript
javascript复制对象使用说明
Jun 28 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
May 07 Javascript
当json键为数字时的取值方法解析
Nov 15 Javascript
JS和JQ的event对象区别分析
Nov 24 Javascript
jQuery标签编辑插件Tagit使用指南
Apr 21 Javascript
jQuery使用正则表达式限制文本框只能输入数字
Jun 18 Javascript
Angular使用cli生成自定义文件、组件的方法
Sep 04 Javascript
JQuery常见节点操作实例分析
May 15 jQuery
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
JavaScript实现简易计算器小功能
Oct 22 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
骨王战斗力在公会成员中排不进前五,却当选了会长,原因竟是这样
2020/03/02 日漫
谈谈关于php的优点与缺点
2013/04/11 PHP
php简单定时执行任务的实现方法
2015/02/23 PHP
你应该知道PHP浮点数知识
2015/05/13 PHP
由prototype_1.3.1进入javascript殿堂-类的初探
2006/11/06 Javascript
javascript一些不错的函数脚本代码
2008/09/10 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
2014/03/08 Javascript
推荐25个超炫的jQuery网格插件
2014/11/28 Javascript
js实现的tab标签切换效果代码分享
2015/08/25 Javascript
JavaScript encodeURI 和encodeURIComponent
2015/12/04 Javascript
vue实现百度搜索下拉提示功能实例
2017/06/14 Javascript
详解Vue中watch的高级用法
2018/05/02 Javascript
Node.js中console.log()输出彩色字体的方法示例
2019/12/01 Javascript
vue 点击其他区域关闭自定义div操作
2020/07/17 Javascript
js实现星星海特效的示例
2020/09/28 Javascript
[48:30]LGD vs infamous Supermajor小组赛D组 BO3 第一场 6.3
2018/06/04 DOTA
Python根据区号生成手机号码的方法
2015/07/08 Python
Django Admin 实现外键过滤的方法
2017/09/29 Python
Python中Scrapy爬虫图片处理详解
2017/11/29 Python
Python I/O与进程的详细讲解
2019/03/08 Python
详解Python列表赋值复制深拷贝及5种浅拷贝
2019/05/15 Python
解决python tkinter界面卡死的问题
2019/07/17 Python
Python OrderedDict的使用案例解析
2019/10/25 Python
Python3爬虫发送请求的知识点实例
2020/07/30 Python
Django通过设置CORS解决跨域问题
2020/11/26 Python
html5 canvas-2.用canvas制作一个猜字母的小游戏
2013/01/07 HTML / CSS
Ratchet 模态框的实现
2020/08/19 HTML / CSS
宝拉珍选英国官网:Paula’s Choice英国
2019/05/29 全球购物
Diesel美国网上商店:意大利牛仔时装品牌
2020/12/10 全球购物
资产评估专业大学生求职信
2013/09/29 职场文书
2014个人反腐倡廉思想汇报
2014/09/15 职场文书
村干部四风问题整改措施
2014/09/30 职场文书
认识实习感想
2015/08/10 职场文书
导游词之西湖雷峰塔
2019/09/18 职场文书
导游词之湖北武当山
2019/09/23 职场文书
Win11安装受阻怎么办? Windows11安装问题与解决方案汇总
2021/11/21 数码科技