|
<!DOCTYPE html>
<html lang="zh-CN">
<head profile=http://www.111Cn.net>
<meta charset="UTF-8">
<title>Js Follow</title>
<style>
html,body{width:100%;margin:0;padding:0;}
div{padding:0;margin:0;text-align:center;font-size:40px;font-weight:bold;color:#fff;}
.clear:after{content:"";display:block;height:0;clear:both;visibility: hidden;overflow:hidden;}
.clear{*zoom:1;}
.wrap{width:1000px;margin:0 auto;}
.header{width:100%;background:#1BA1E2;height:200px;line-height:300px;}
.footer{width:100%;background:#666;height:150px;line-height:100px;}
.content{width:100%;margin:0 auto;background:#aaa;}
.left{width:70%;float:left;background:#8CBF26;}
.text{padding:50px;text-align:left;word-break:break-all;line-height:36px;font-size:16px;font-weight:normal;}
.right{width:30%;float:left;}
.aside{padding:10px 0px;margin-top:50px;background:#F09609;width:300px;height:150px;}
.aside2{padding:10px 0px;background:#DB4F33;}
</style>
</head>
<body>
<div class="wrap">
<div class="header">Header</div>
<div class="content clear">
<div class="left">
<div class="text">
使用方法：<br/>
1.载入插件，在页面载入之后，window.onload = function(){}<br/>
2.创建需要跟随的对象的数组，比如 var followIds = [document.getElementById("follow"),document.getElementById("follow2")];<br/>
3.初始化Follow：new Follow();<br/>
4.传参，obj是对象数组，bottom是滚动块距离底部的最小的高度<br/>
<hr/>
<pre style="word-break:break-all;word-wrap:break-word;width:600px;">
<script type="text/javascript" src="follow.js"></script>
window.onload = function(){
var followIds = [document.getElementById("follow"),document.getElementById("follow2")];
new Follow({
obj:followIds,
bottom:150
});
}
</pre>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<div class="right">
<div class="aside" id="follow">
跟随滚动<br/>模块1
</div>
<div class="aside2" id="follow2">
跟随滚动<br/>模块2
</div>
</div>
</div>
<div class="footer">Footer</div>
</div>
<script type="text/javascript" >
(function(){var e=function(a){var b=this;b.objArr=a.obj;b.arrLen=b.objArr.length;b.obj=b.objArr[0];b.bottomHeight=a.bottom;b.mTop=parseInt(b.getStyle(b.obj,'marginTop'));b.posX=b.position(b.obj)['x'];b.posY=b.position(b.obj)['y'];b.bodyHeight=document.documentElement.scrollHeight;b.sawHeight=document.documentElement.clientHeight;b.minusHeight=b.bodyHeight-b.sawHeight-b.bottomHeight;b.newWrap=null;b.newWrapHeight=null;b.addEventCheck(window,'scroll',function(){b.action()});b.addEventCheck(window,'resize',function(){b.reset()})};e.prototype={addEventCheck:function(a,b,c){if(a.addEventListener){a.addEventListener(b,c,false)}else if(a.attachEvent){a.attachEvent('on'+b,c)}},position:function(a){var b=this;return a.offsetParent?{x:(a.offsetLeft+b.position(a.offsetParent)['x']),y:(a.offsetTop+b.position(a.offsetParent)['y'])}:{x:a.offsetLeft,y:a.offsetTop}},action:function(){var a=this;var b=document.body.scrollTop+document.documentElement.scrollTop;if(b+a.mTop>a.posY){a.fixedFn();if(a.newWrap&&b+a.bottomHeight+a.newWrapHeight>a.bodyHeight){var c=b+a.bottomHeight+a.newWrapHeight-a.bodyHeight;if(a.sawHeight>a.newWrapHeight){c+=a.sawHeight-a.newWrapHeight}else{c=0;if(b>a.minusHeight){c=b-a.minusHeight}};a.setStyle(a.newWrap,{'bottom':c+'px','top':'auto'})}}else{a.showObj(a.objArr);if(a.newWrap){a.hideObj(a.newWrap)}}},fixedFn:function(){var a=this;if(a.newWrap){a.setStyle(a.newWrap,{'bottom':'auto','top':'0px'});a.hideObj(a.objArr);a.showObj(a.newWrap)}else{a.newWrap=document.createElement('div');var b=null;for(var c=0;c<a.arrLen;c++){b=a.objArr[c].cloneNode(true);b.setAttribute('id','');a.newWrap.appendChild(b)};a.setStyle(a.newWrap,{'position':'fixed','left':a.posX+'px','top':'0px','bottom':'auto'});a.obj.parentNode.appendChild(a.newWrap);a.newWrapHeight=a.newWrap.offsetHeight}},hideObj:function(a){var b=this;if(b.isArray(a)){var c=a.length;for(var d=0;d<c;d++){a[d].style.display='none'}}else{a.style.display='none'}},showObj:function(a){var b=this;if(b.isArray(a)){var c=a.length;for(var d=0;d<c;d++){a[d].style.display='block'}}else{a.style.display='block'}},isArray:function(a){return Object.prototype.toString.call(a)==='[object Array]'},getStyle:function(a,b){if(a.currentStyle){return a.currentStyle[b]}else{return document.defaultView.getComputedStyle(a,null)[b]}},setStyle:function(a,b){for(var c in b){a.style[c]=b[c]}},reset:function(){var a=this;a.showObj(a.objArr);a.posX=a.position(a.obj)['x'];a.posY=a.position(a.obj)['y'];a.sawHeight=document.documentElement.clientHeight;a.minusHeight=a.bodyHeight-a.sawHeight-a.bottomHeight;if(a.newWrap){a.setStyle(a.newWrap,{'left':a.posX+'px'})}a.action()}};window.Follow=e}());
</script>
<script>
window.onload = function(){
var followIds = [document.getElementById("follow"),document.getElementById("follow2")];
new Follow({
obj:followIds,
bottom:150
});
}
</script>
</body>
</html>
|
