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 相关文章推荐
Code: write(s,d) 输出连续字符串
Aug 19 Javascript
深入理解Javascript动态方法调用与参数修改的问题
Dec 10 Javascript
javascript页面加载完执行事件代码
Feb 11 Javascript
JavaScript中跨域调用Flash的方法
Aug 11 Javascript
jQuery实现提示密码强度的代码
Jul 15 Javascript
JavaScript基于ajax编辑信息用法实例
Jul 15 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
Dec 01 Javascript
javascript实现禁止复制网页内容汇总
Dec 30 Javascript
JavaScript的setter与getter方法
Nov 29 Javascript
JavaScript执行环境及作用域链实例分析
Aug 01 Javascript
记一次vue-webpack项目优化实践详解
Feb 17 Javascript
js事件触发操作实例分析
Jun 21 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最常用的ini函数分析 针对PHP.ini配置文件
2010/04/22 PHP
通过JAVAScript实现页面自适应
2007/01/19 Javascript
javascript来定义类的规范小结
2010/11/19 Javascript
javascript 弹出窗口中是否显示地址栏的实现代码
2011/04/14 Javascript
jquery如何改变html标签的样式(两种实现方法)
2013/01/16 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
2014/03/13 Javascript
jQuery右下角旋转环状菜单特效代码
2015/08/10 Javascript
jQuery 3.0 的 setter和getter 模式详解
2016/07/11 Javascript
浅谈移动端之js touch事件 手势滑动事件
2016/11/07 Javascript
AngularJS服务service用法总结
2016/12/13 Javascript
nodejs爬虫遇到的乱码问题汇总
2017/04/07 NodeJs
vue路由拦截器和请求拦截器知识点总结
2019/11/08 Javascript
nuxt配置通过指定IP和端口访问的实现
2020/01/08 Javascript
python实现绘制树枝简单示例
2014/07/24 Python
Python正规则表达式学习指南
2016/08/02 Python
运动检测ViBe算法python实现代码
2018/01/09 Python
Django JWT Token RestfulAPI用户认证详解
2019/01/23 Python
python 利用浏览器 Cookie 模拟登录的用户访问知乎的方法
2019/07/11 Python
Python3远程监控程序的实现方法
2019/07/15 Python
解决Django Static内容不能加载显示的问题
2019/07/28 Python
Python魔法方法 容器部方法详解
2020/01/02 Python
新手常见Python错误及异常解决处理方案
2020/06/18 Python
keras 多任务多loss实例
2020/06/22 Python
中外合拍动画首获奥斯卡提名,“上海出品”《飞奔去月球》能否拿下最终大奖?
2021/03/16 国漫
基于CSS3实现图片模糊过滤效果
2015/11/19 HTML / CSS
新秀丽官方旗舰店:Samsonite拉杆箱、双肩包、皮具
2018/03/05 全球购物
英国最大的专业户外零售商:Mountain Warehouse
2018/06/06 全球购物
创建绿色社区汇报材料
2014/08/22 职场文书
创先争优宣传标语
2014/10/08 职场文书
公安局班子个人对照检查材料思想汇报
2014/10/09 职场文书
2014年党风建设工作总结
2014/11/19 职场文书
党支部2014年度工作总结
2014/12/04 职场文书
给校长的建议书作文400字
2015/09/14 职场文书
Go语言-为什么返回值为接口类型,却返回结构体
2021/04/24 Golang
Windows Server 2012配置DNS服务器的方法
2022/04/29 Servers
python的html标准库
2022/04/29 Python