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 相关文章推荐
js点击页面其它地方将某个显示的DIV隐藏
Jul 12 Javascript
JS根据变量保存方法名并执行方法示例
Apr 04 Javascript
javascript常用函数(2)
Nov 05 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
Oct 14 Javascript
学习使用bootstrap的modal和carousel
Dec 09 Javascript
Angular多选、全选、批量选择操作实例代码
Mar 10 Javascript
Angular简单验证功能示例
Dec 22 Javascript
使用vue + less 实现简单换肤功能的示例
Feb 21 Javascript
layer.open回调获取弹出层参数的实现方法
Sep 10 Javascript
使用xampp将angular项目运行在web服务器的教程
Sep 16 Javascript
使用React代码动态生成栅格布局的方法
May 24 Javascript
js实现简易ATM功能
Oct 27 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
粗略计算在线时间,bug:ip相同
2006/12/09 PHP
php 随机排序广告的实现代码
2011/05/09 PHP
PHP字符串的编码问题的详细介绍
2013/04/27 PHP
PHP进阶学习之依赖注入与Ioc容器详解
2019/06/19 PHP
Ext.MessageBox工具类简介
2009/12/10 Javascript
jquery移动listbox的值原理及代码
2013/05/03 Javascript
jQuery的缓存机制浅析
2014/06/07 Javascript
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
2015/08/21 NodeJs
vue使用中的内存泄漏【推荐】
2018/07/10 Javascript
详解如何在vue项目中使用eslint+prettier格式化代码
2018/11/10 Javascript
Vue js with语句原理及用法解析
2020/09/03 Javascript
在antd4.0中Form使用initialValue操作
2020/11/02 Javascript
Python实现的多线程同步与互斥锁功能示例
2017/11/30 Python
Python中shapefile转换geojson的示例
2019/01/03 Python
使用Python将Mysql的查询数据导出到文件的方法
2019/02/25 Python
python写入数据到csv或xlsx文件的3种方法
2019/08/23 Python
django 简单实现登录验证给你
2019/11/06 Python
如何给Python代码进行加密
2020/01/10 Python
Python turtle画图库&amp;&amp;画姓名实例
2020/01/19 Python
利用HTML5画出一个坦克的形状具体实现代码
2013/06/20 HTML / CSS
StubHub西班牙:购买和出售全球活动门票
2017/06/05 全球购物
印尼最大的婴儿用品购物网站:Orami
2017/09/28 全球购物
世界上最好的儿童品牌:AlexandAlexa
2018/01/27 全球购物
俄罗斯领先的移动和数字设备在线商店:Svyaznoy.ru
2020/12/21 全球购物
教师求职信范文
2014/05/24 职场文书
法律专业求职信
2014/05/24 职场文书
地理信息科学专业推荐信
2014/09/08 职场文书
应届生求职自荐信范文
2015/03/04 职场文书
2015年度内部审计工作总结
2015/05/20 职场文书
入党积极分子半年考察意见
2015/06/02 职场文书
小学英语教学经验交流材料
2015/11/02 职场文书
2016猴年春节慰问信
2015/11/30 职场文书
幼儿园小班教学反思
2016/03/03 职场文书
Redis如何一键部署脚本
2021/04/12 Redis
MySQL 用 limit 为什么会影响性能
2021/09/15 MySQL
JavaScript中isPrototypeOf函数
2021/11/07 Javascript