一个小例子,主要是滚动事件和元素位置的判定,不多说了,直接上代码,上注释。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
height:3000px;
}
div{
width:20vw;
height:20vh;
border:1px solid red;
position:absolute;
top:20vh;
left:20vw;
}
</style>
</head>
<body>
<div id="mydiv"></div>
<script>
var mydiv = document.getElementById( "mydiv" );
//获得div据上边框的距离,然后保存起来,因为这个距离会改变
var realTop=mydiv.getBoundingClientRect().top;
//屏幕滚动事件
window.onscroll = function(){
//获得滚动条至顶部的距离
var t = document.documentElement.scrollTop || document.body.scrollTop;
//当滚动条滚动的距离超过了div据上边框的距离,那么就说明div要被遮盖了
if(t>=realTop){
//这个时候就不要再往上移动,直接固定位置,据上为0
mydiv.style.position="fixed";
mydiv.style.top="0px";
}else{
//否则,说明div据上还有距离,那么就取消固定布局,直接设大小
mydiv.style.position="position";
mydiv.style.top=(realTop-t)+"px";
}
}
</script>
</body>
</html>