您的位置：首页 > 运维架构 > 网站架构

web-滚动条事件，明确来说就是一些网站上的滚动条滚动到某一个位置才会出现你想看到的东西

2017-09-28 08:48 609 查看
这个滚动事件，就好像是淘宝，京东上的一样，它们左边的区块会有某些产品的介绍，所以这时就需要滚动条事件，就是为了用户的便利而设置的该在这个界面的那个地方显示对产品的介绍，不懂的可以看下图



<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0;
padding: 0;
}
.cont{
height: 5000px;
}
#top{
position: fixed;
width: 100%;
height: 50px;
top: 0px;
left: 0px;
background-color: pink;
display: none;
}
#left{
position: fixed;
top: 150px;
left: 20px;
height: 500px;
width: 50px;
background-color: green;
display: none;
}
</style>

<script>

//          var a = 0;

//滚动事件
function myScroll(){
//              a++;

var i = document.body.scrollTop;
var top = document.getElementById("top");
var left = document.getElementById("left");

//控制顶部
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";
}

}

</script>

</head>
<body onscroll="myScroll()">

<div id="left"></div>

<div id="top"></div>
<div class="cont"></div>

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  界面 淘宝网 京东
相关文章推荐
新的分享
章节导航