javascript跟随滚动效果插件代码（javascript Follow Plugin）

更新时间：2013年08月03日 10:55:23 作者：

这篇文章介绍了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;">
&lt;script type="text/javascript" src="follow.js"&gt;&lt;/script&gt;
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>
 

您可能感兴趣的文章:

将json当数据库一样操作的javascript lib
使用javascript操作JSON的类库TAFFY DB，具体介绍了：查询数据、添加数据、删除数据、修改数据。
2013-10-10
JavaScript实现定时器循环展示数组
这篇文章主要为大家详细介绍了JavaScript实现定时器循环展示数组，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-09-09
javascript限制用户只能输汉字中文的方法
这篇文章主要介绍了javascript限制用户只能输汉字中文的方法,实例列举了利用Unicode判断与正则判断两种方法,具有一定的实用价值,需要的朋友可以参考下
2014-11-11
微信小程序实现左侧滑栏过程解析
这篇文章主要介绍了微信小程序实现左侧滑栏过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-08-08
解决WebStorm 2022.3.x 无法识别 Element UI 2.15.11 新版本中的 el-
这篇文章主要介绍了解决 WebStorm 2022.3.x 无法识别 Element UI 2.15.11 新版本中的 el-xxx 标签问题,本文给大家分享两种解决方案，需要的朋友可以参考下
2023-01-01
JavaScript数组Array的一些常用方法总结
JavaScript的Array对象是用于构造数组的全局对象,数组是类似于列表的高阶对象,下面这篇文章主要给大家介绍了关于JavaScript数组Array的一些常用方法,需要的朋友可以参考下
2021-11-11
微信小程序canvas实现刮刮乐效果
这篇文章主要为大家详细介绍了微信小程序canvas实现刮刮乐效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-07-07
JavaScript数组、json对象、eval()函数用法实例分析
这篇文章主要介绍了JavaScript数组、json对象、eval()函数用法,结合实例形式分析了JS数组创建、赋值、连接、翻转,json对象定义、读取,eval()函数的功能、使用等,需要的朋友可以参考下
2019-02-02
JavaScript基于ChatGPT API实现划词翻译浏览器脚本
最近 GitHub 上有个基于 ChatGPT API 的浏览器脚本，openai-translator，短时间内 star 冲到了 9.7k，抛开 tauri 是使用 rust 部分，那浏览器部分实现还是比较简单的，今天我们就来手动实现一下
2023-03-03
BootStrap下的弹出框加载select2框架失败的解决方法
本文通过简单的代码给大家介绍了BootStrap下的弹出框加载select2框架失败的解决方法，需要的朋友参考下吧
2017-08-08