用JS实现滚动条事件的代码怎么样写？-群英

上一篇：JS中new的用法是什么，过程是怎样的？下一篇：用JS怎样写一个简单计数器，方法是什么

这篇文章我们来了解“用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>

以上就是关于“用JS实现滚动条事件的代码怎么样写？”的介绍了，感谢各位的阅读，如果大家想要了解更多相关的内容，欢迎关注群英网络，小编每天都会为大家更新不同的知识。

标签： js滚动条事件

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

上一篇：JS中new的用法是什么，过程是怎样的？下一篇：用JS怎样写一个简单计数器，方法是什么