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 相关文章推荐
获取Javscript执行函数名称的方法
Dec 22 Javascript
用javascript getComputedStyle获取和设置style的原理
Oct 10 Javascript
Google排名中的10个最著名的 JavaScript库
Apr 27 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
Jul 18 Javascript
jquery常用操作小结
Jul 21 Javascript
arguments对象验证函数的参数是否合法
Jun 26 Javascript
JS判断浏览器是否安装flash插件的简单方法
Sep 13 Javascript
JavaScript链式调用实例浅析
Dec 19 Javascript
jQuery zTree树插件的使用教程
Aug 16 jQuery
vuex vue简单使用知识点总结
Aug 29 Javascript
基于JavaScript实现表格隔行换色
May 08 Javascript
Vue实现购物车基本功能
Nov 08 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
BBS(php &amp; mysql)完整版(七)
2006/10/09 PHP
解析php入库和出库
2013/06/25 PHP
php抓取网站图片并保存的实现方法
2015/10/29 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
在JavaScript中监听IME键盘输入事件
2011/05/29 Javascript
jquery设置元素的readonly和disabled的写法
2013/09/22 Javascript
javascript动态的改变IFrame的高度实现自动伸展
2013/10/12 Javascript
JavaScript禁止页面操作的示例代码
2013/12/17 Javascript
使表格的标题列可左右拉伸jquery插件封装
2014/11/24 Javascript
JavaScript中string转换成number介绍
2014/12/31 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
2015/01/09 Javascript
JavaScript学习笔记整理_setTimeout的应用
2016/09/19 Javascript
jquery插件ContextMenu设置右键菜单
2017/03/13 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
2017/04/13 Javascript
jquery实现提示语淡入效果
2017/05/05 jQuery
Node.js 使用流实现读写同步边读边写功能
2017/09/11 Javascript
Vue框架TypeScript装饰器使用指南小结
2019/02/18 Javascript
使用PYTHON接收多播数据的代码
2012/03/01 Python
Python字符串处理函数简明总结
2015/04/13 Python
Python实现中一次读取多个值的方法
2018/04/22 Python
Python使用itchat 功能分析微信好友性别和位置
2019/08/05 Python
Python实现socket非阻塞通讯功能示例
2019/11/06 Python
python递归调用中的坑:打印有值, 返回却None
2020/03/16 Python
Django 如何使用日期时间选择器规范用户的时间输入示例代码详解
2020/05/22 Python
美国农场商店:Blain’s Farm & Fleet
2020/01/17 全球购物
Belvilla法国:休闲度假房屋出租
2020/10/03 全球购物
成人高等教育毕业生自我鉴定
2013/10/22 职场文书
初婚未育未抱养证明
2014/01/12 职场文书
外语系大学生自荐信范文
2014/03/01 职场文书
竞选大队长演讲稿
2014/04/29 职场文书
明星员工获奖感言
2014/08/14 职场文书
义诊活动总结
2015/02/04 职场文书
雨花台导游词
2015/02/06 职场文书
如何制作自己的原生JavaScript路由
2021/05/05 Javascript
JavaScript实现简单计时器
2021/06/22 Javascript
使用CSS实现黑白格背景效果
2022/06/01 HTML / CSS