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 相关文章推荐
jQuery源码分析-04 选择器-Sizzle-工作原理分析
Nov 14 Javascript
如何将JS的变量值传递给ASP变量
Dec 10 Javascript
滚动图片效果 jquery实现回旋滚动效果
Jan 08 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
Nov 02 Javascript
Ajax跨域实现代码(后台jsp)
Jan 21 Javascript
关于vue-router路径计算问题
May 10 Javascript
JavaScript创建对象的七种方式(推荐)
Jun 26 Javascript
微信小程序实现topBar底部选择栏效果
Jul 20 Javascript
微信小程序云开发 搭建一个管理小程序
May 17 Javascript
js tab栏切换代码实例解析
Sep 03 Javascript
JS 事件机制完整示例分析
Jan 15 Javascript
vue随机验证码组件的封装实现
Feb 19 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 发送带附件邮件示例
2014/01/23 PHP
微信公众平台消息接口校验与消息接口响应实例
2014/12/23 PHP
PHP生成制作验证码的简单实例
2016/06/12 PHP
PHP实现的超长文本分页显示功能示例
2018/06/04 PHP
精心挑选的15款优秀jQuery 本特效插件和教程
2012/08/06 Javascript
jQuery获取注册信息并提示实现代码
2013/04/21 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
2013/07/09 Javascript
Firefox和IE兼容性问题及解决方法总结
2013/10/08 Javascript
javascript数字时钟示例分享
2014/04/23 Javascript
JS实现alert中显示换行的方法
2015/12/17 Javascript
Bootstrap 粘页脚效果
2016/03/28 Javascript
JavaScript中的await/async的作用和用法
2016/10/31 Javascript
jQuery EasyUI Draggable拖动组件
2017/03/01 Javascript
JS验证全角与半角及相互转化的介绍
2017/05/18 Javascript
简单的vuex 的使用案例笔记
2018/04/13 Javascript
详解React项目如何修改打包地址(编译输出文件地址)
2019/03/21 Javascript
微信小程序生成分享海报方法(附带二维码生成)
2019/03/29 Javascript
基于elementUI实现图片预览组件的示例代码
2019/03/31 Javascript
js字符串处理之绝妙的代码
2019/04/05 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
2019/06/10 Javascript
axios实现简单文件上传功能
2019/09/25 Javascript
python模拟登录百度代码分享(获取百度贴吧等级)
2013/12/27 Python
Python设计模式之观察者模式实例
2014/04/26 Python
python 设置文件编码格式的实现方法
2017/12/21 Python
使用Python为中秋节绘制一块美味的月饼
2019/09/11 Python
TensorFlow2.X结合OpenCV 实现手势识别功能
2020/04/08 Python
如何更换python默认编辑器的背景色
2020/08/10 Python
canvas小画板之平滑曲线的实现
2020/08/12 HTML / CSS
blueseventy官网:铁人三项和比赛泳衣
2021/02/06 全球购物
override和overload的区别
2016/03/09 面试题
公司同意接收函
2014/01/13 职场文书
安全生产计划书
2014/05/04 职场文书
大学生村官考核材料
2014/05/23 职场文书
2014年学校法制宣传日活动总结
2014/11/01 职场文书
世界水日宣传活动总结
2015/02/09 职场文书
JavaGUI模仿QQ聊天功能完整版
2021/07/04 Java/Android