javaScript实现滚动条事件详解
时间:2019-04-07
本文章向大家介绍javaScript实现滚动条事件详解,主要包括javaScript实现滚动条事件详解使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文实例为大家分享了js实现滚动条事件的具体代码,供大家参考,具体内容如下
代码:
<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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- QBC查询
- 一条delete语句的调优(r4笔记第86天)
- Java支付宝接口开发【面试+工作】
- 03.SVN检出/解决冲突/提交
- Spring思维导图,让Spring不再难懂(mvc篇)
- SQL优化一(SQL使用技巧)
- Spring思维导图,让Spring不再难懂(aop篇)
- MongoDB初探第二篇 (r4笔记第82天)
- Spring思维导图,让Spring不再难懂(cache篇)
- 曲折的10g,11g中EM的安装配置过程(r4笔记第98天)
- Linux 学习记录 一(安装、基本文件操作).
- 实用的位运算应用(r4笔记第97天)
- 关于date格式的两个案例(r4笔记第96天)
- 【新技术分享】C++17 最新进展
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 7. Jackson用树模型处理JSON是必备技能,不信你看
- epoll,求知者离我近点
- SOCKET网络编程 (通俗易懂入门篇)
- 进程 · 全家桶
- Posix线程 它们那一大家子事儿,要觉得好你就收藏进被窝慢慢看(2)
- Posix线程 它们那一大家子事儿,要觉得好你就收藏进被窝里慢慢看 (1)
- 种树:二叉树、二叉搜索树、AVL树、红黑树、哈夫曼树、B树、树与森林
- 【Linux内核】进程管理
- Django后台管理界面修改(代码修改)
- OpsnSSH抓包分析 | SSH协议分析
- 搭建简易的物联网服务端和客户端-第三次增补(二十二)
- ReentrantLock源码解析
- Nodejs连接PostgreSQL
- ReentrantReadWriteLock源码解析
- LockSupport源码解析