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 相关文章推荐
33个优秀的 jQuery 图片展示插件分享
Mar 14 Javascript
jQuery 数据缓存模块进化史详细介绍
Nov 19 Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
Apr 25 Javascript
js冒泡法和数组转换成字符串示例代码
Aug 14 Javascript
JS的location.href跳出框架打开新页面的方法
Sep 04 Javascript
JavaScript字符串常用类使用方法汇总
Apr 14 Javascript
Vue.js每天必学之指令系统与自定义指令
Sep 07 Javascript
jQuery的extend方法【三种】
Dec 14 Javascript
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
简单了解node npm cnpm的具体使用方法
Feb 27 Javascript
微信小程序模板消息推送的两种实现方式
Aug 27 Javascript
JS中循环遍历数组的四种方式总结
Jan 23 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
linux iconv方法的使用
2011/10/01 PHP
PHP连接MySQL进行增、删、改、查操作
2017/02/19 PHP
php微信公众号开发之微信企业付款给个人
2018/10/04 PHP
javascript json 新手入门文档
2009/12/03 Javascript
有关DOM元素与事件的3个谜题
2010/11/11 Javascript
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
2012/01/04 Javascript
window.print打印指定div实例代码
2013/12/13 Javascript
javascript高级编程之函数表达式 递归和闭包函数
2015/11/29 Javascript
jquery插件之文字间歇自动向上滚动效果代码
2016/02/25 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
2016/07/26 Javascript
Angularjs CURD 详解及实例代码
2016/09/14 Javascript
手机端转换rem适应
2017/04/01 Javascript
vue+vuex+axios实现登录、注册页权限拦截
2018/03/09 Javascript
微信小程序实现弹出菜单
2018/07/19 Javascript
详解Vue源码之数据的代理访问
2018/12/11 Javascript
详细教你微信公众号正文页SVG交互开发技巧
2019/07/25 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
2019/09/02 Javascript
javaScript把其它类型转换为Number类型
2019/10/13 Javascript
基于vue-cli3和element实现登陆页面
2019/11/13 Javascript
原生js生成图片验证码
2020/10/11 Javascript
react使用antd表单赋值,用于修改弹框的操作
2020/10/29 Javascript
[02:45]DOTA2英雄基础教程 伐木机
2013/12/23 DOTA
Python实现方便使用的级联进度信息实例
2015/05/05 Python
Python中文分词实现方法(安装pymmseg)
2016/06/14 Python
python实现可以断点续传和并发的ftp程序
2016/09/13 Python
对python中的for循环和range内置函数详解
2018/04/17 Python
浅谈python中np.array的shape( ,)与( ,1)的区别
2018/06/04 Python
解决Pycharm运行时找不到文件的问题
2018/10/29 Python
Scrapy-Redis结合POST请求获取数据的方法示例
2019/05/07 Python
canvas简单连线动画的实现代码
2020/02/04 HTML / CSS
施华洛世奇英国官网:SWAROVSKI英国
2017/03/13 全球购物
美国排名第一的葡萄酒俱乐部:Firstleaf Wine Club
2020/01/02 全球购物
美国艺术和工艺品商店:Hobby Lobby
2020/12/09 全球购物
制冷与电控专业应届生求职信
2013/11/11 职场文书
助学感谢信范文
2015/01/21 职场文书
Django实现在线无水印抖音视频下载(附源码及地址)
2021/05/06 Python