javaScript实现滚动条事件详解
网络编程 2021-07-04 17:32www.168986.cn编程入门
这篇文章主要为大家详细介绍了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; } # { position: fixed; width: 100%; height: 55px; : 0px; left: 0px; background-color: rosybrown; display: none; } #left { position: fixed; width: 50px; height: 400px; : 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 = document.getElementById(""); 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) { .style.display = "block"; .innerHTML = i; } else { .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=""></div> <div class="cont"></div> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程