JavaScript编程交流 加入小组

20个成员 24个话题 创建时间:2015-09-15

js固定在网页某个位置,下拉滑动到固定位置

发表于2017-06-03 785次查看

j如何实现s固定在网页某个位置,下拉滑动到固定的位置:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js原生态固定在网站某个位置,下拉也会滑动到固定位置_吾爱编程</title>
<style>
.div1 {
	width:100px;
	height:100px;
	position:absolute;
	right:0px;
	background:#f60;
}
</style>
<script>
window.onscroll = function(){
	var odiv = document.getElementById('odiv');
	var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
//odiv.style.top = document.documentElement.clientHeight - odiv.offsetHeight + scrollTop + 'px';
	starMove(document.documentElement.clientHeight - odiv.offsetHeight + scrollTop);
	console.info(document.documentElement.clientHeight +'--'+ odiv.offsetHeight +'--'+  scrollTop)
}
	var timer = null;
function starMove(iTar){
	clearInterval(timer);
	timer = setInterval(function(){
		var speed = (iTar - odiv.offsetTop)/6;
		console.info(iTar+'--------------'+odiv.offsetTop  )
		speed = speed>0 ? Math.ceil(speed):Math.floor(speed);
		if(odiv.offsetTop == iTar){
			clearInterval(timer);
		}else{
			odiv.style.top = odiv.offsetTop+speed+'px'
		}
	},30)	
}
</script>
</head>
<body style="height:2000px;">
<div class="div1" id="odiv"></div>
</body>
</html>

我学院网推荐学习:JavaScript编程语言基础教程

发表回复
你还没有登录,请先 登录或 注册!