javascript跟随滚动效果插件代码(javascript Follow Plugin)

  Js 跟随滚动效果插件

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

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

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

  =======

  Js 跟随滚动效果插件

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

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

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

  =======

  使用方法

  代码如下

  

复制代码 代码如下:

  <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

  });

  }

  完整实例

  代码如下

  

复制代码 代码如下:

  <!DOCTYPE html>

  <html lang="zh-CN">

  <head profile="http://gmpg.org/xfn/11">

  <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" src="follow.min.js"></script>

  <script>

  window.onload = function(){

  var followIds = [document.getElementById("follow"),document.getElementById("follow2")];

  new Follow({

  obj:followIds,

  bottom:150

  });

  }

  </script>

  </body>

  </html>