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 相关文章推荐
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
Jan 13 Javascript
jquery(hide方法)隐藏指定元素实例
Nov 11 Javascript
浅析JavaScript中的常用算法与函数
Nov 21 Javascript
可自定义速度的js图片无缝滚动示例分享
Jan 20 Javascript
深入分析JQuery和JavaScript的异同
Oct 23 Javascript
JavaScript中Null与Undefined的区别解析
Jun 30 Javascript
JavaScript实现斗地主游戏的思路
Feb 29 Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
Jun 12 Javascript
js构建二叉树进行数值数组的去重与优化详解
Mar 26 Javascript
angular使用md5,CryptoJS des加密的方法
Jun 03 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
Jun 20 Javascript
vue跳转页面的几种方法(推荐)
Mar 26 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中ini_set和ini_get函数的用法小结
2014/02/18 PHP
ThinkPHP模板Switch标签用法示例
2014/06/30 PHP
PHP入门教程之日期与时间操作技巧总结(格式化,验证,获取,转换,计算等)
2016/09/11 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
2011/06/08 Javascript
js 幻灯片的实现
2011/12/06 Javascript
js写一个弹出层并锁屏效果实现代码
2012/12/07 Javascript
jQuery循环滚动新闻列表示例代码
2014/06/17 Javascript
js判断鼠标左、中、右键哪个被点击的方法
2015/01/27 Javascript
js实现带农历和八字等信息的日历特效
2016/05/16 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
2016/05/24 Javascript
利用JS实现数字增长
2016/07/28 Javascript
总结JavaScript的正则与其他语言的不同之处
2016/08/25 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
2017/07/11 Javascript
vue+element的表格实现批量删除功能示例代码
2018/08/17 Javascript
JavaScript中import用法总结
2019/01/20 Javascript
JS实现二维数组元素的排列组合运算简单示例
2019/01/28 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
2019/10/09 Javascript
[01:21]DOTA2新纪元-7.0新版本即将开启!
2016/12/11 DOTA
在Linux上安装Python的Flask框架和创建第一个app实例的教程
2015/03/30 Python
Python生成数字图片代码分享
2017/10/31 Python
Python3 实现随机生成一组不重复数并按行写入文件
2018/04/09 Python
使用python3实现操作串口详解
2019/01/01 Python
python粘包问题及socket套接字编程详解
2019/06/29 Python
Django的性能优化实现解析
2019/07/30 Python
基于python 微信小程序之获取已存在模板消息列表
2019/08/05 Python
python爬虫 urllib模块反爬虫机制UA详解
2019/08/20 Python
python实现网站微信登录的示例代码
2019/09/18 Python
香港时装购物网站:ZALORA香港
2017/04/23 全球购物
工作个人的自我评价
2014/01/14 职场文书
青年文明号口号
2014/06/17 职场文书
大学生作弊检讨书
2014/09/11 职场文书
2015年初中元旦晚会活动总结
2014/11/28 职场文书
Python超简单容易上手的画图工具库推荐
2021/05/10 Python
SpringBoot整合RabbitMQ的5种模式实战
2021/08/02 Java/Android
Win10开机修复磁盘错误怎么跳过?Win10关闭开机磁盘检查的方法
2022/09/23 数码科技