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


Posted in Javascript onAugust 03, 2013

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>
 
Javascript 相关文章推荐
javascript调试说明
Jun 07 Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
Jul 25 Javascript
ie中js创建checkbox默认选中问题探讨
Oct 21 Javascript
在javascript中执行任意html代码的方法示例解读
Dec 25 Javascript
jquery+php随机生成红包金额数量代码分享
Aug 27 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
Dec 08 Javascript
jQuery树插件zTree使用方法详解
May 02 jQuery
详解angularjs跨页面传参遇到的一些问题
Nov 01 Javascript
JS实现换肤功能的方法实例详解
Jan 30 Javascript
js中console在一行内打印字符串和对象的方法
Sep 10 Javascript
Vue extend的基本用法(实例详解)
Dec 09 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
Jan 29 Javascript
jquery ui dialog实现弹窗特效的思路及代码
Aug 03 #Javascript
js下拉框二级关联菜单效果代码具体实现
Aug 03 #Javascript
js实现拉伸拖动iframe的具体代码
Aug 03 #Javascript
js判断输入是否为数字的具体实例
Aug 03 #Javascript
js replace 与replaceall实例用法详解
Aug 03 #Javascript
jquery动态加载js三种方法实例
Aug 03 #Javascript
js innerHTML 改变div内容的方法
Aug 03 #Javascript
You might like
新版PHP极大的增强功能和性能
2006/10/09 PHP
一个简单的php实现的MySQL数据浏览器
2007/03/11 PHP
具有时效性的php加密解密函数代码
2013/06/19 PHP
PHP Trait代码复用类与多继承实现方法详解
2019/06/17 PHP
慎用 somefunction.prototype 分析
2009/06/02 Javascript
JS在IE和FF下attachEvent,addEventListener学习笔记
2009/11/26 Javascript
extjs 为某个事件设置拦截器
2010/01/15 Javascript
jquery tab插件制作实现代码
2010/06/22 Javascript
通过百度地图获取公交线路的站点坐标的js代码
2012/05/11 Javascript
JavaScript极简入门教程(一):基础篇
2014/10/25 Javascript
JavaScript数组常用方法
2015/03/02 Javascript
jQuery中的Deferred和promise 的区别
2016/04/03 Javascript
JS关闭窗口时产生的事件及用法示例
2016/08/20 Javascript
JavaScript 中对象的深拷贝
2016/12/04 Javascript
js使用原型对象(prototype)需要注意的地方
2017/08/28 Javascript
微信小程序实现折叠面板
2018/01/31 Javascript
微信小程序音乐播放器开发
2019/11/20 Javascript
使用next.js开发网址缩短服务的方法
2020/06/17 Javascript
[11:12]2018DOTA2国际邀请赛寻真——绿色长城OpTic
2018/08/10 DOTA
学习python (2)
2006/10/31 Python
Python编程语言的35个与众不同之处(语言特征和使用技巧)
2014/07/07 Python
python使用PIL给图片添加文字生成海报示例
2018/08/17 Python
GitHub 热门:Python 算法大全,Star 超过 2 万
2019/04/29 Python
python+opencv像素的加减和加权操作的实现
2019/07/14 Python
python函数局部变量、全局变量、递归知识点总结
2019/11/15 Python
Python time库基本使用方法分析
2019/12/13 Python
Python如何访问字符串中的值
2020/02/09 Python
详解CSS3选择器:nth-child和:nth-of-type之间的差异
2017/09/18 HTML / CSS
毕业生求职推荐信
2013/11/04 职场文书
宗教学大学生职业生涯规划范文
2014/02/08 职场文书
视光学专业自荐信
2014/06/24 职场文书
法人授权委托书
2014/09/16 职场文书
小班下学期个人总结
2015/02/12 职场文书
幼儿园心得体会范文
2016/01/21 职场文书
Python如何识别银行卡卡号?
2021/06/10 Python
python 字典和列表嵌套用法详解
2021/06/29 Python