实现侧边栏效果，上拉到一定程度自动停止

置顶 Revival_Liang

于 2017-02-23 16:12:54 发布

阅读量532

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/Revival_Liang/article/details/56674529

版权

web 专栏收录该内容

75 篇文章 0 订阅

订阅专栏

全部代码如下：

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
	<script type="text/javascript">
	//监听滚动的方法
	window.οnscrοll=function(){
	//获得滚动的像素，这个方法一滚动就会被执行
    var top = document.documentElement.scrollTop||document.body.scrollTop; 	
	if(top>650){
		var side = document.getElementById("side");
		side.style.position = "fixed";
		side.style.top = "50px";
	}else{
		var side = document.getElementById("side");
		side.style.position = "absolute";
		side.style.top = "700px";
	}
}
</script>
<style type="text/css">
	#side{
	width: 50px;
	height: 500px;
	background: purple;
	position: absolute;
	right: 20px;
	top: 700px;
}
.box{
	width: 100%;
	height: 5000px;
	background: yellow;
}
</style>
</head>  
<body>
<div class="box">
<div id="side">
</div>
</div>
</body>  
</html>

效果图如下：