侧边广告

时间 2019-12-07

标签侧边广告繁體版

原文原文链接

　　在逛网站咱们可能都会看到靠近网页右边的中间位置有个小广告,无论咱们向上仍是向下滑动页面它都始终垂直居中。最简单的方式是用固定定位。javascript

　　先来布局(为了让滚动条出现强行给个2000px的高。。。。。。)css

<body style="height:2000px">
	<div id="div1"></div>
</body>

cssjava

#div1{
	width: 100px;
        height: 100px;
        background: red;
        position: fixed;
        right: 0;
        top: calc(50% - 50px);
}

　这样div就差很少在中间的位置了而且不会随页面滚动。函数

　这就完了?每当这种时候咱们就问问本身,IE6呢?而后当咱们放在IE6测试以后发现果真不行。。。。。。那怎么办呢?那是时候请出咱们的js了。布局

不过咱们先把样式改一下测试

#div1{
	width: 100px;
	height: 100px;
	background: red;
	position: absolute;
	right: 0;
　　  top: calc(50% - 50px);
}

而后咱们在分析一下，一开始是广告栏处于中间。但随着页面的滚动,它会往上移动直至不见。居中的关键就在于计算广告栏离页面顶部的距离。在此以前咱们先来看看这段距离，它其实是页面顶部到广告栏顶部的距离,等于滚动条滚动的距离+(可视区的高度-广告栏的高度)/2网站

　　将计算方法转化为代码就是3d

window.onscroll = function(){
	var oDiv = document.getElementById('div1');
	var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;　　//滚动条滚动的距离

	var t = scrollTop+(document.documentElement.clientHeight-oDiv.offsetHeight)/2;　　//广告栏距离页面顶部的实际距离　　
}

　　距离算出来了，咱们还须要一个让广告栏滚动的函数startMove(iTarget)。为了让效果天然，选择用定时器由快到慢的让广告栏移动到中间。因此速度能够设置为(目标位置-当前位置)/8,这样越靠近中间速度就越慢。blog

window.onscroll = function(){
	var oDiv = document.getElementById('div1');
	var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;

	var t = scrollTop+(document.documentElement.clientHeight-oDiv.offsetHeight)/2;

	startMove(parseInt(t));
}
var timer = null;
function startMove(iTarget){
	var oDiv = document.getElementById('div1');
	var oTxt = document.getElementById('txt');
	clearInterval(timer);
	timer = setInterval(function(){
		var speed = (iTarget-oDiv.offsetTop)/8;
		speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
		if(oDiv.offsetTop == iTarget){
			clearInterval(timer);
		}else{
			oDiv.style.top = oDiv.offsetTop+speed+'px';
		}
	},30)
}