javascript跟随滚动效果插件代码-javascript-IT落伍者

Javascript Follow Plugin

Js 跟随滚动效果插件

支持定义多个跟随ID采用css fixed属性不支持ie兼容其他主流浏览器

支持定义滚动到底部的最小高度不会覆盖底部

页面大小resize后插件会自动重置参数

=======
Js 跟随滚动效果插件

支持定义多个跟随ID采用css fixed属性不支持ie兼容其他主流浏览器
支持定义滚动到底部的最小高度不会覆盖底部
页面大小resize后插件会自动重置参数
=======

使用方法

代码如下

windowonload = function(){
         var followIds = [documentgetElementById("follow")documentgetElementById("follow")];
         new Follow({
         obj:followIds
         bottom:
         });
         }

完整实例

代码如下

         <!DOCTYPE html>
         <html lang="zhCN">
         <head profile="
         <meta charset="UTF">
         <title>Js Follow</title>
         <style>
         htmlbody{width:%;margin:;padding:;}
         div{padding:;margin:;textalign:center;fontsize:px;fontweight:bold;color:#fff;}
         clear:after{content:"";display:block;height:;clear:both;visibility: hidden;overflow:hidden;}
         clear{*zoom:;}

wrap{width:px;margin: auto;}
         header{width:%;background:#BAE;height:px;lineheight:px;}
         footer{width:%;background:#;height:px;lineheight:px;}
         content{width:%;margin: auto;background:#aaa;}
         left{width:%;float:left;background:#CBF;}
         text{padding:px;textalign:left;wordbreak:breakall;lineheight:px;fontsize:px;fontweight:normal;}
         right{width:%;float:left;}
         aside{padding:px px;margintop:px;background:#F;width:px;height:px;}
         aside{padding:px px;background:#DBF;}
         </style>
         </head>
         <body>
         <div class="wrap">
         <div class="header">Header</div>
         <div class="content clear">
         <div class="left">
         <div class="text">
         使用方法<br/>
         载入插件在页面载入之后windowonload = function(){}<br/>
         创建需要跟随的对象的数组比如 var followIds = [documentgetElementById("follow")documentgetElementById("follow")];<br/>
         初始化Follownew Follow();<br/>
         传参obj是对象数组bottom是滚动块距离底部的最小的高度<br/>
         <hr/>
         <pre style="wordbreak:breakall;wordwrap:breakword;width:px;">
         <script type="text/javascript" src="followjs"></script>

</pre>
         </div>
         <br/><br/><br/><br/><br/><br/><br/><br/><br/>
         </div>
         <div class="right">
         <div class="aside" id="follow">
         跟随滚动<br/>模块
         </div>
         <div class="aside" id="follow">
         跟随滚动<br/>模块
         </div>
         </div>
         </div>
         <div class="footer">Footer</div>
         </div>