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 相关文章推荐
验证用户是否修改过页面的数据的实现方法
Sep 26 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
Jan 14 Javascript
js判断变量初始化的三种形式及推荐用的形式
Jul 22 Javascript
JavaScript错误处理
Feb 03 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
Aug 20 Javascript
js实现微博发布小功能
Jan 12 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
Mar 28 Javascript
Vue页面跳转动画效果的实现方法
Sep 23 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
Dec 29 Javascript
JS原型与继承操作示例
May 09 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
Apr 03 Javascript
js之ajax文件上传
May 13 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 session_set_save_handler 函数的用法(mysql)
2013/06/29 PHP
php监测数据是否成功插入到Mysql数据库的方法
2016/11/25 PHP
JavaScript asp.net 获取当前超链接中的文本
2009/04/14 Javascript
JS window.opener返回父页面的应用
2009/10/24 Javascript
原创javascript小游戏实现代码
2010/08/19 Javascript
JS控制日期显示的小例子
2013/11/23 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
2015/01/02 Javascript
jQuery中removeAttr()方法用法实例
2015/01/05 Javascript
javascript删除元素节点removeChild()用法实例
2015/05/26 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
2015/08/08 Javascript
request请求获取参数的实现方法(post和get两种方式)
2016/09/27 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
2016/10/14 Javascript
JS跨域请求外部服务器的资源
2017/02/06 Javascript
Vue指令的钩子函数使用方法
2017/03/20 Javascript
node.js 利用流实现读写同步,边读边写的方法
2017/09/11 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
2018/06/05 jQuery
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
2019/08/03 Javascript
Vue实现简单计算器
2021/01/20 Vue.js
python判断字符串是否包含子字符串的方法
2015/03/24 Python
在Python的Flask框架下使用sqlalchemy库的简单教程
2015/04/09 Python
selenium+python设置爬虫代理IP的方法
2018/11/29 Python
python 实现视频流下载保存MP4的方法
2019/01/09 Python
Python为何不能用可变对象作为默认参数的值
2019/07/01 Python
使用Python实现跳一跳自动跳跃功能
2019/07/10 Python
python爬虫 urllib模块发起post请求过程解析
2019/08/20 Python
澳大利亚最大的护发和护肤品购物网站:RY
2019/12/26 全球购物
法学专业毕业生自荐信范文
2013/12/18 职场文书
挂科检讨书范文
2014/02/20 职场文书
学校课外活动总结
2014/05/08 职场文书
股指期货心得体会
2014/09/10 职场文书
讲文明知礼仪演讲稿
2014/09/13 职场文书
2014年班组长工作总结
2014/11/20 职场文书
三八妇女节慰问信
2015/02/14 职场文书
Python WSGI 规范简介
2021/04/11 Python
解决Python中的modf()函数取小数部分不准确问题
2021/05/28 Python
Go 中的空白标识符下划线
2022/03/25 Golang