监听滚动轴的一些案例

乱七八糟一锅粥

本案例，很乱，包含：

1. 监听滚动轴固定导航栏
2. 小广告的动态固定
3. 返回顶部按钮
   效果如下：
   
   CSS部分

body, ul {
	margin: 0px;
	padding: 0px;
}
#ads {
	height: 75px;
	width: 100%;
	font: 400 25px/75px "simsun";
	text-align: center;
	background-color: #a00;
	color: #fff;
}
#header {
	width: 100%;
	height: 75px;
	background: rgba(51,51,51,1);
}
#header #wrap {
	position: relative;
	margin: 0 auto;
	width: 900px;
	height: 75px;
	font: 500 18px/75px "simsun";
	text-align: center;
}
#header #wrap ul {
	position:relative;
	list-style: none;
}
#header #wrap ul li {
	float: left;
	height: 75px;
	width: 150px;
	color: #fff;
	cursor: pointer;
}
#wrap span {
	position: absolute;
	left: 0px;
	bottom: 1px;
	height: 3px;
	width: 150px;
	background-color: #fff;
}
#content {
	height: 800px;
	width: 100%;
	font: 700 35px/800px "simsun";
	text-align: center;
	background-color: #0C9;
	color: #fff;
}
#footer {
	height: 300px;
	width: 100%;
	background: #333;
	font: 500 30px/300px "simsun";
	text-align: center;
	color: #fff;
}
#wrap ul li.current {
	background-color: #000;
}
.fixed {
	position: fixed;
	left: 0px;
	top: 0px;
	opacity: 0.8;
}
#img1 {
	position:absolute;
	left: 15px;
	top: 200px;
	width: 100px;
	height: 250px;
	font: 400 18px/250px "simsun";
	text-align: center;
	background: #666;
	color: #fff;
	border-radius: 5px;
}
#img2 {
	position:absolute;
	right: 15px;
	top: 200px;
	width: 100px;
	height: 250px;
	font: 400 18px/250px "simsun";
	text-align: center;
	background: #666;
	color: #fff;
	border-radius: 5px;
}
#back {
	position:fixed;
	right: 10px;
	bottom: 20px;
	height: 45px;
	width: 40px;
	padding-top: 5px;
	font: 400 14px/20px "simsun";
	text-align: center;
	background-color: #333;
	color: #fff;
	cursor: pointer;
	border-radius: 5px;
	word-break: break-all;
	display: none;
}

body部分

<div id="ads">这是一则广告</div>
<div id="header">
	<div id="wrap">
		<ul>
			<li>活动首页</li>
			<li>活动报名</li>
			<li>活动评审</li>
			<li>榜单投票</li>
			<li>榜单设置</li>
			<li>抽奖活动</li>
		</ul>
		<span></span>
	</div>
</div>
<div id="content">这是活动内容</div>
<div id="footer">欢迎来访</div>
<div id="img1">广告1</div>
<div id="img2">广告2</div>
<div id = "back">返回顶部</div>
<script>
//获取事件源
var ads = document.getElementById("ads");
var adHeight = ads.offsetHeight;
var header = document.getElementById("header");
var wrap = document.getElementById("wrap");
var content = document.getElementById("content");
var img1 = document.getElementById("img1");
var img2 = document.getElementById("img2");
var backBtn = document.getElementById("back");
var ul = wrap.children[0];
var liArr = ul.children;
var span  = wrap.children[1];
var spanWidth = liArr[0].offsetWidth;
//需求1：让span滑动起来
for(var i=0; i<liArr.length; i++){
	liArr[i].index = i;
	liArr[i].onmouseover = function (){
		for(var j=0; j<liArr.length ;j++){
			liArr[j].className = "";
		}
		this.className = "current";
		animate_left(span,this.index*spanWidth);
	}
	liArr[i].onmouseout = function (){
		for(var k=0; k<liArr.length; k++){
			liArr[k].className = "";
		}
		liArr[0].className = "current";
		animate_left(span,0);
	}
}
//需求2.监听滚动轴
window.onscroll = function (){
	if(scrolltop().top>=adHeight){
		header.className = "fixed";
	}else{
		header.className = "";
	}
}
//需求3：制作两侧的广告和让返回顶部按钮出现
window.onscroll = function (){
	var val = scrolltop().top;
	if(val>100){
		backBtn.style.display  = "block";
	}else{
		backBtn.style.display = "none";
	}
	animate_top(img1,val+200);
	animate_top(img2,val+200);
}
//需求4：制作返回顶部的按钮	
var timer = null;
var target = 0;
var leader = 0;
backBtn.onclick = function (){
	clearInterval(timer);
	timer = setInterval(function (){
		var step = (target-leader)/10;
		step = step>0?Math.ceil(step):Math.floor(step);
		leader = leader+step;
		window.scrollTo(0,leader);
		if(leader === 0){
			clearInterval(timer);
		}
	},50)
}
//函数1：左右缓慢移动
function animate_left (ele,target){
	clearInterval(ele.timer);
	ele.timer = setInterval(function(){
		var step = (target-ele.offsetLeft)/10;
		step = step>0?Math.ceil(step):Math.floor(step);
		ele.style.left = ele.offsetLeft + step + "px";
		var val = target - ele.offsetLeft;
		if(Math.abs(val)<Math.abs(step)){
			ele.style.left = target + "px";
			clearInterval(ele.timer);
		}
	},20)
}
//函数二：上下缓慢移动
function animate_top (ele,target){
	clearInterval(ele.timer);
	ele.timer = setInterval(function(){
		var step = (target-ele.offsetTop)/10;
		step = step>0?Math.ceil(step):Math.floor(step);
		ele.style.top = ele.offsetTop + step + "px";
		var val = target - ele.offsetTop;
		if(Math.abs(val)<Math.abs(step)){
			ele.style.top = target + "px";
			clearInterval(ele.timer);
		}
	},20)
}
//兼容性scroll方法
function scrolltop (){
	return {
		"top" : document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset,
		"left" : document.body.scrollLeft || document.documentElement.scrollLeft || window.pageXOffset
	}
}
</script>