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 相关文章推荐
关于query Javascript CSS Selector engine
Apr 12 Javascript
Javascript 按位左移运算符使用介绍(
Feb 04 Javascript
动态加载jquery库的方法
Feb 12 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
Feb 21 Javascript
jQuery实现获取隐藏div高度的方法示例
Feb 09 Javascript
js+canvas实现动态吃豆人效果
Mar 22 Javascript
MUI  Scroll插件的使用详解
Apr 13 Javascript
jquery实现倒计时小应用
Sep 19 jQuery
Gulp实现静态网页模块化的方法详解
Jan 09 Javascript
javascript刷新父页面方法汇总详解
Oct 10 Javascript
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
Express 配置HTML页面访问的实现
Nov 01 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时间戳格式全部汇总 (获取时间、时间戳)
2016/06/13 PHP
php判断手机浏览还是web浏览,并执行相应的动作简单实例
2016/07/28 PHP
php 魔术常量详解及实例代码
2016/12/04 PHP
PHP排序算法之快速排序(Quick Sort)及其优化算法详解
2018/04/21 PHP
Jquery下判断Id是否存在的代码
2011/01/06 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
2014/06/09 Javascript
详细分析JavaScript变量类型
2015/07/08 Javascript
Angular.js中控制器之间的传值详解
2017/04/24 Javascript
修改Nodejs内置的npm默认配置路径方法
2018/05/13 NodeJs
Nuxt.js实现校验访问浏览器类型的中间件
2018/08/24 Javascript
vue弹窗组件的实现示例代码
2018/09/10 Javascript
小程序实现左右来回滚动字幕效果
2018/12/28 Javascript
小程序:授权、登录、session_key、unionId的详解
2019/05/15 Javascript
layui 弹出层值回传解决方式
2019/11/14 Javascript
JavaScript 链表定义与使用方法示例
2020/04/28 Javascript
JS数组reduce()方法原理及使用技巧解析
2020/07/14 Javascript
js仿淘宝放大镜效果
2020/12/28 Javascript
Python中运算符&quot;==&quot;和&quot;is&quot;的详解
2016/10/08 Python
Python 备份程序代码实现
2017/03/06 Python
Python使用Turtle模块绘制五星红旗代码示例
2017/12/11 Python
图文详解python安装Scrapy框架步骤
2019/05/20 Python
python网络爬虫 Scrapy中selenium用法详解
2019/09/28 Python
解决Keyerror ''acc'' KeyError: ''val_acc''问题
2020/06/18 Python
python和C++共享内存传输图像的示例
2020/10/27 Python
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
2016/04/26 HTML / CSS
CSS3改变浏览器滚动条样式
2019/01/04 HTML / CSS
希尔顿酒店中国网站:Hilton中国
2017/03/11 全球购物
介绍一下linux文件系统分配策略
2012/11/17 面试题
应聘编辑职位自荐信范文
2014/01/05 职场文书
《梅兰芳学艺》教学反思
2014/02/24 职场文书
股权转让意向书
2014/04/01 职场文书
教室标语大全
2014/06/21 职场文书
2014年宣传部个人工作总结
2014/12/06 职场文书
清明节扫墓活动总结
2015/02/09 职场文书
暖春观后感
2015/06/08 职场文书
巴黎圣母院读书笔记
2015/06/26 职场文书