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 相关文章推荐
jquery中的sortable排序之后的保存状态的解决方法
Jan 28 Javascript
JavaScript获取table中某一列的值的方法
May 06 Javascript
jQuery选择id属性带有点符号元素的方法
Mar 17 Javascript
Fullpage.js固定导航栏-实现定位导航栏
Mar 17 Javascript
Bootstrap实现提示框和弹出框效果
Jan 11 Javascript
详解JS中的立即执行函数
Feb 24 Javascript
在vue项目中引入highcharts图表的方法(详解)
Mar 05 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
Jan 03 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
Apr 29 Javascript
小程序实现背景音乐播放和暂停
Jun 19 Javascript
JavaScript中如何调用Java方法
Sep 16 Javascript
JS中如何优雅的使用async await详解
Oct 05 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 &amp;&amp; 逻辑与运算符使用说明
2010/03/04 PHP
基于PHPExcel的常用方法总结
2013/06/13 PHP
老生常谈php 正则中的i,m,s,x,e分别表示什么
2017/03/02 PHP
PHP删除二维数组中相同元素及数组重复值的方法示例
2017/05/05 PHP
Laravel实现ORM带条件搜索分页
2019/10/24 PHP
jquery.boxy插件的iframe扩展代码
2010/07/02 Javascript
jQuery 操作option的实现代码
2011/03/03 Javascript
瀑布流布局并自动加载实现代码
2013/03/12 Javascript
js中数组Array的一些常用方法总结
2013/08/12 Javascript
JS控制阿拉伯数字转为中文大写示例代码
2013/09/04 Javascript
javascript实时获取鼠标坐标值并显示的方法
2015/04/30 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
2016/10/07 Javascript
JavaScript原型对象、构造函数和实例对象功能与用法详解
2018/08/04 Javascript
vue中 this.$set的用法详解
2019/09/06 Javascript
wxpython 学习笔记 第一天
2009/02/09 Python
python使用append合并两个数组的方法
2015/04/28 Python
Python检测QQ在线状态的方法
2015/05/09 Python
基于Django contrib Comments 评论模块(详解)
2017/12/08 Python
python3安装pip3(install pip3 for python 3.x)
2018/04/03 Python
浅谈python下含中文字符串正则表达式的编码问题
2018/12/07 Python
pandas求两个表格不相交的集合方法
2018/12/08 Python
Python使用selenium + headless chrome获取网页内容的方法示例
2019/10/16 Python
python 两个数据库postgresql对比
2019/10/21 Python
keras实现多种分类网络的方式
2020/06/11 Python
Python项目跨域问题解决方案
2020/06/22 Python
Python Mock模块原理及使用方法详解
2020/07/07 Python
Python 实现集合Set的示例
2020/12/21 Python
C有"按引用传递"吗
2016/09/06 面试题
食品科学与工程专业毕业生求职信范文
2014/07/21 职场文书
环卫工作汇报材料
2014/10/28 职场文书
2014年小学少先队工作总结
2014/12/18 职场文书
医院保洁员岗位职责
2015/02/13 职场文书
花木兰观后感
2015/06/10 职场文书
嘉年华活动新闻稿
2015/07/17 职场文书
PostgreSQL事务回卷实战案例详析
2022/03/25 PostgreSQL
前端canvas中物体边框和控制点的实现示例
2022/08/05 Javascript