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 字符编码规则
May 04 Javascript
js 火狐下取本地路径实现思路
Apr 02 Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
Apr 26 Javascript
HTML5之lang属性与dir属性的详解
Jun 19 Javascript
jQuery on方法传递参数示例
Dec 09 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
Dec 09 Javascript
全面详细的jQuery常见开发技巧手册
Feb 21 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
Feb 27 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
Oct 15 Javascript
p5.js绘制旋转的正方形
Oct 23 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
Feb 27 Javascript
小程序实现筛子抽奖
May 26 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中取得URL的根域名的代码
2011/03/23 PHP
如何修改和添加Apache的默认站点目录
2013/07/05 PHP
PHP使用pear实现mail发送功能 windows环境下配置pear
2016/04/15 PHP
2017年最好用的9个php开发工具推荐(超好用)
2017/10/23 PHP
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
2013/10/17 Javascript
javascript结合canvas实现图片旋转效果
2015/05/03 Javascript
jquery实现仿JqueryUi可拖动的DIV实例
2015/07/31 Javascript
jQuery实现移动端滑块拖动选择数字效果
2015/12/24 Javascript
js+html5操作sqlite数据库的方法
2016/02/02 Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
2016/05/24 Javascript
AngularJs directive详解及示例代码
2016/09/01 Javascript
HTML5 js实现拖拉上传文件功能
2020/11/20 Javascript
关于Vue.nextTick()的正确使用方法浅析
2017/08/25 Javascript
详解vue-cli中的ESlint配置文件eslintrc.js
2017/09/25 Javascript
es6 filter() 数组过滤方法总结
2019/04/03 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
2020/05/27 Javascript
JS模拟实现京东快递单号查询
2020/11/30 Javascript
详解ES6 中的Object.assign()的用法实例代码
2021/01/11 Javascript
[00:30]塑造者的传承礼包-戴泽“暗影之焰”套装展示视频
2014/04/04 DOTA
[00:13]天涯墨客二技能展示
2018/08/25 DOTA
机器学习10大经典算法详解
2017/12/07 Python
Pytorch反向求导更新网络参数的方法
2019/08/17 Python
Python上下文管理器类和上下文管理器装饰器contextmanager用法实例分析
2019/11/07 Python
pytorch 计算ConvTranspose1d输出特征大小方式
2020/06/23 Python
Python3如何使用range函数替代xrange函数
2020/10/05 Python
基于python实现坦克大战游戏
2020/10/27 Python
CSS3过渡transition效果实例介绍
2016/05/03 HTML / CSS
深入理解HTML的FormData对象
2016/05/17 HTML / CSS
迟到检讨书400字
2014/01/13 职场文书
初中高效课堂实施方案
2014/02/26 职场文书
党支部四风整改方案
2014/10/25 职场文书
部门2014年度工作总结
2014/11/12 职场文书
2014小学语文教师个人工作总结
2014/12/03 职场文书
2014五年级班主任工作总结
2014/12/05 职场文书
大学新生入学感想
2015/08/07 职场文书
关于k8s环境部署mysql主从的问题
2022/03/13 MySQL