MooTools 页面滚动浮动层智能定位实现代码


Posted in Javascript onAugust 23, 2011

HTML代码:

<div class="float" id="float"> 
我是个腼腆羞涩的浮动层... 
</div>

JS代码:
var $smartFloat = function(elements) { 
var position = function(element) { 
var top = element.getPosition().y, pos = element.getStyle("position"); 
window.addEvent("scroll", function() { 
var scrolls = this.getScroll().y; 
if (scrolls > top) { 
if (window.XMLHttpRequest) { 
element.setStyles({ 
position: "fixed", 
top: 0 
}); 
} else { 
element.setStyles({ 
top: scrolls 
}); 
} 
}else { 
element.setStyles({ 
position: "absolute", 
top: top 
}); 
} 
}); 
}; 
if ($type(elements) === "array") { 
return elements.each(function(items) { 
position(items); 
}); 
} else if ($type(elements) === "element") { 
position(elements); 
} 
}; //绑定 
$smartFloat($("float"));
Javascript 相关文章推荐
Prototype使用指南之ajax
Jan 10 Javascript
动态控制Table的js代码
Mar 07 Javascript
浅谈js中的闭包
Mar 16 Javascript
JavaScript中的Repaint和Reflow用法详解
Jul 27 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
Sep 09 Javascript
JS类的定义与使用方法深入探索
Nov 26 Javascript
JS正则表达式修饰符global(/g)用法分析
Dec 27 Javascript
react-native使用react-navigation进行页面跳转导航的示例
Sep 07 Javascript
微信禁止下拉查看URL的处理方法
Sep 28 Javascript
基于JavaScript中字符串的match与replace方法(详解)
Dec 04 Javascript
vue.js 添加 fastclick的支持方法
Aug 28 Javascript
js闭包和垃圾回收机制示例详解
Mar 01 Javascript
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
Aug 23 #Javascript
jQuery页面滚动浮动层智能定位实例代码
Aug 23 #Javascript
jqGrid jQuery 表格插件测试代码
Aug 23 #Javascript
30个精美的jQuery幻灯片效果插件和教程
Aug 23 #Javascript
js 函数的副作用分析
Aug 23 #Javascript
javascript 运算数的求值顺序
Aug 23 #Javascript
读jQuery之十四 (触发事件核心方法)
Aug 23 #Javascript
You might like
解析:php调用MsSQL存储过程使用内置RETVAL获取过程中的return值
2013/07/03 PHP
Eclipse的PHP插件PHPEclipse安装和使用
2014/07/20 PHP
php cookie名使用点号(句号)会被转换
2014/10/23 PHP
PHP统一页面编码避免乱码问题
2015/04/09 PHP
基于jquery的获取浏览器窗口大小的代码
2011/03/28 Javascript
jQuery数据显示插件整合实现代码
2011/10/24 Javascript
jQuery Ajax提交表单查询获得数据实例代码
2012/09/19 Javascript
addEventListener()第三个参数useCapture (Boolean)详细解析
2013/11/07 Javascript
JavaScript中的关联数组问题
2015/03/04 Javascript
jQuery unbind 删除绑定事件详解
2016/05/24 Javascript
js评分组件使用详解
2017/06/06 Javascript
JS实现的合并多个数组去重算法示例
2018/04/11 Javascript
Javascript实现异步编程的过程
2018/06/18 Javascript
小程序日历控件使用方法详解
2018/12/29 Javascript
js设置鼠标悬停改变背景色实现详解
2019/06/26 Javascript
Vue快速实现通用表单验证功能
2019/12/05 Javascript
[01:42:49]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第一场 2月26日
2021/03/11 DOTA
python中sets模块的用法实例
2014/09/30 Python
深入讲解Python中面向对象编程的相关知识
2015/05/25 Python
Python三级菜单的实例
2017/09/13 Python
Python将图片转换为字符画的方法
2020/06/16 Python
python实现得到当前登录用户信息的方法
2019/06/21 Python
python 通过邮件控制实现远程控制电脑操作
2020/03/16 Python
python名片管理系统开发
2020/06/18 Python
Nixon手表英国官网:美国尼克松手表品牌
2020/02/10 全球购物
Kipling澳洲官网:购买凯浦林包包
2020/12/17 全球购物
家长会学生家长演讲稿
2013/12/29 职场文书
环境日宣传活动总结
2014/07/09 职场文书
论群众路线学习心得体会
2014/10/31 职场文书
2014年健康教育工作总结
2014/11/20 职场文书
秦始皇兵马俑导游词
2015/02/02 职场文书
灵山大佛导游词
2015/02/04 职场文书
七一表彰大会简报
2015/07/20 职场文书
个人向公司借款协议书
2016/03/19 职场文书
教你怎么用PyCharm为同一服务器配置多个python解释器
2021/05/31 Python
美元符号 $
2022/02/17 杂记