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 相关文章推荐
JavaScript自定义DateDiff函数(兼容所有浏览器)
Mar 01 Javascript
jQuery获取当前对象标签名称的方法
Feb 07 Javascript
js 日期比较相关天数代码
Apr 02 Javascript
七个很有意思的PHP函数
May 12 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
Dec 31 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
Aug 12 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
Aug 20 Javascript
下一代Bootstrap的5个特点 超酷炫!
Jun 17 Javascript
JavaScript设计模式之单体模式全面解析
Sep 09 Javascript
vue中格式化时间过滤器代码实例
Apr 17 Javascript
Javascript 关于基本类型和引用类型的个人理解
Nov 01 Javascript
JavaScript设计模型Iterator实例解析
Jan 22 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实现utf-8和GB2312编码相互转换函数代码
2013/02/07 PHP
PHP strip_tags()去除HTML、XML以及PHP的标签介绍
2014/02/18 PHP
ThinkPHP中自定义错误页面和提示页面实例
2014/11/22 PHP
给WordPress的编辑后台添加提示框的代码实例分享
2015/12/25 PHP
浅析PHP 中move_uploaded_file 上传中文文件名失败
2019/04/17 PHP
在Laravel5中正确设置文件权限的方法
2019/05/22 PHP
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
2011/12/20 Javascript
JSON.stringify 语法实例讲解
2012/03/14 Javascript
jquery $.each() 使用小探
2013/08/23 Javascript
JavaScript支持的最大递归调用次数分析
2014/06/24 Javascript
js事件处理程序跨浏览器解决方案
2016/03/27 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
2016/09/04 Javascript
Javascript中常见的逻辑题和解决方法
2016/09/17 Javascript
jQuery实现html table行Tr的复制、删除、计算功能
2017/07/10 jQuery
JS+HTML5 canvas绘制验证码示例
2018/12/05 Javascript
tweenjs缓动算法的使用实例分析
2019/08/26 Javascript
JS实现多功能计算器
2020/10/28 Javascript
[03:02]辉夜杯主赛事第二日 每日之星
2015/12/27 DOTA
利用Fn.py库在Python中进行函数式编程
2015/04/22 Python
从Python的源码来解析Python下的freeblock
2015/05/11 Python
Django中对通过测试的用户进行限制访问的方法
2015/07/23 Python
python 接口测试response返回数据对比的方法
2018/02/11 Python
pandas 将list切分后存入DataFrame中的实例
2018/07/03 Python
python中selenium操作下拉滚动条的几种方法汇总
2019/07/14 Python
python飞机大战pygame游戏之敌机出场实现方法详解
2019/12/17 Python
HTML5实现可缩放时钟代码
2017/08/28 HTML / CSS
英国高级百货公司:Harvey Nichols
2017/01/29 全球购物
美国家居装饰店:Pier 1
2019/09/04 全球购物
您的时尚,您的生活方式:DTLR Villa
2019/12/25 全球购物
亚洲最大的运动鞋寄售店:KicksCrew
2020/11/26 全球购物
老师的检讨书
2014/02/23 职场文书
幼儿园毕业园长感言
2014/02/24 职场文书
个人承诺书
2014/03/26 职场文书
北京英语导游词
2015/02/12 职场文书
电力企业职工培训心得体会
2016/01/11 职场文书
VW、VH适配移动端的解决方案与常见问题
2023/05/21 HTML / CSS