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 捕获窗口关闭事件
Jul 26 Javascript
Extjs单独定义各组件的实例代码
Jun 25 Javascript
点击弹出层效果&amp;弹出窗口后网页背景变暗效果的实现代码
Feb 10 Javascript
js左右弹性滚动对联广告代码分享
Feb 19 Javascript
判断字符串的长度(优化版)中文占两个字符
Oct 30 Javascript
javascript中Function类型详解
Apr 28 Javascript
对jQuary选择器的全面总结
Jun 20 Javascript
15位和18位身份证JS校验的简单实例
Jul 18 Javascript
node.js中grunt和gulp的区别详解
Jul 17 Javascript
微信小程序实现红包雨功能
Jul 11 Javascript
JS插件clipboard.js实现一键复制粘贴功能
Dec 04 Javascript
使用p5.js实现动态GIF图片临摹重现
Oct 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
德生PL330测评
2021/03/02 无线电
php db类库进行数据库操作
2009/03/19 PHP
深入php处理整数函数的详解
2013/06/09 PHP
安装ImageMagick出现error while loading shared libraries的解决方法
2014/09/23 PHP
PHP中error_reporting()用法详解
2015/08/31 PHP
php结合web uploader插件实现分片上传文件
2016/05/10 PHP
JavaScript入门教程(5) js Screen屏幕对象
2009/01/31 Javascript
关于javascript function对象那些迷惑分析
2011/10/24 Javascript
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
2012/02/03 Javascript
如何获取网站icon有哪些可行的方法
2014/06/05 Javascript
JavaScript获取文本框内选中文本的方法
2015/02/20 Javascript
EasyUI中combobox默认值注意事项
2015/03/01 Javascript
JavaScript中实现Map的示例代码
2015/09/09 Javascript
跟我学习javascript解决异步编程异常方案
2015/11/23 Javascript
三种Node.js写文件的方式
2016/03/08 Javascript
微信小程序 配置文件详细介绍
2016/12/14 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
2017/01/08 Javascript
nodejs和C语言插入mysql数据库乱码问题的解决方法
2017/04/14 NodeJs
Nodejs实现多房间简易聊天室功能
2017/06/20 NodeJs
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
2018/11/05 Javascript
Vue核心概念Action的总结
2019/01/18 Javascript
微信小程序自定义多列选择器使用详解
2019/06/21 Javascript
Node.js+Vue脚手架环境搭建的方法步骤
2020/03/08 Javascript
[46:47]2014 DOTA2国际邀请赛中国区预选赛 DT VS HGT
2014/05/22 DOTA
[01:45]DOTA2新英雄“神谕者”全方位展示
2014/11/21 DOTA
python numpy和list查询其中某个数的个数及定位方法
2018/06/27 Python
Python导入模块包原理及相关注意事项
2020/03/25 Python
3分钟看懂Python后端必须知道的Django的信号机制
2020/07/26 Python
Pycharm连接gitlab实现过程图解
2020/09/01 Python
解决Python3.7.0 SSL低版本导致Pip无法使用问题
2020/09/03 Python
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
2018/11/30 HTML / CSS
Html5实现二维码扫描并解析
2016/01/20 HTML / CSS
canvas学习总结三之绘制路径-线段
2019/01/31 HTML / CSS
大学生村官典型材料
2014/01/12 职场文书
2015秋季开学典礼致辞
2015/07/16 职场文书
奥特曼十大神器:奥特手镯在榜,第一是贝利亚的神器
2022/03/18 日漫