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 innerHTML 的一些问题的解决方法
Jun 22 Javascript
基于jsTree的无限级树JSON数据的转换代码
Jul 27 Javascript
编写高性能Javascript代码的N条建议
Oct 12 Javascript
JavaScrip调试技巧之断点调试
Oct 22 Javascript
Javascript实现的SHA-256加密算法完整实例
Feb 02 Javascript
jquery pagination分页插件使用详解(后台struts2)
Jan 22 Javascript
原生和jQuery的ajax用法详解
Jan 23 Javascript
node.js + socket.io 实现点对点随机匹配聊天
Jun 30 Javascript
使用JavaScript实现表格编辑器(实例讲解)
Aug 02 Javascript
微信小程序吸底区域适配iPhoneX的实现
Apr 09 Javascript
el-table树形表格表单验证(列表生成序号)
May 31 Javascript
解决vue项目axios每次请求session不一致的问题
Oct 24 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加密解密的代码
2007/07/16 PHP
php中使用gd库实现远程图片下载实例
2015/05/12 PHP
PHP自定义函数实现格式化秒的方法
2016/09/14 PHP
常用的javascript function代码
2008/05/23 Javascript
js location.replace与location.reload的区别
2010/09/08 Javascript
JS验证身份证有效性示例
2013/10/11 Javascript
浅谈JSON.parse()和JSON.stringify()
2015/07/14 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
2015/12/30 Javascript
深入浅析Bootstrap列表组组件
2016/05/03 Javascript
Node.js检测端口(port)是否被占用的简单示例
2016/09/29 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
2017/01/05 Javascript
javascript表达式和运算符详解
2017/02/07 Javascript
JS中offset和匀速动画详解
2018/02/06 Javascript
vue中eslintrc.js配置最详细介绍
2018/12/21 Javascript
在vue中使用vuex,修改state的值示例
2019/11/08 Javascript
详解Vue 单文件组件的三种写法
2020/02/19 Javascript
python实现分析apache和nginx日志文件并输出访客ip列表的方法
2015/04/04 Python
python基于multiprocessing的多进程创建方法
2015/06/04 Python
Python selenium 三种等待方式详解(必会)
2016/09/15 Python
Python中用psycopg2模块操作PostgreSQL方法
2017/11/28 Python
Python实现使用卷积提取图片轮廓功能示例
2018/05/12 Python
pygame游戏之旅 创建游戏窗口界面
2018/11/20 Python
python安装pil库方法及代码
2019/06/25 Python
python和c语言的主要区别总结
2019/07/07 Python
Python将string转换到float的实例方法
2019/07/29 Python
使用python实现CGI环境搭建过程解析
2020/04/28 Python
python基于pexpect库自动获取日志信息
2021/02/01 Python
css3 transform及原生js实现鼠标拖动3D立方体旋转
2016/06/20 HTML / CSS
HTML5+WebSocket实现多文件同时上传的实例
2016/12/29 HTML / CSS
Office DEPOT法国官网:欧迪办公用品采购
2018/01/03 全球购物
英国最大的纸工艺品商店:CraftStash
2018/12/01 全球购物
四风问题对照检查材料整改措施
2014/09/27 职场文书
2015公务员年度考核评语
2015/03/25 职场文书
社区服务活动感想
2015/08/11 职场文书
中学团支部工作总结
2015/08/13 职场文书
java实现对Hadoop的操作
2021/07/01 Java/Android