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 相关文章推荐
需要做特殊处理的DOM元素属性的访问
Nov 05 Javascript
菜鸟javascript基础整理1
Dec 06 Javascript
JS 精确统计网站访问量的实例代码
Jul 05 Javascript
按Enter键触发事件的jquery方法实现代码
Feb 17 Javascript
JS中数组Array的用法示例介绍
Feb 20 Javascript
javascript实现存储hmtl字符串示例
Apr 25 Javascript
jQuery EasyUI Draggable拖动组件
Mar 01 Javascript
关于javascript作用域的常见面试题分享
Jun 18 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
Jul 18 Javascript
JavaScript动态检测密码强度原理及实现方法详解
Jun 11 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
Jul 24 Javascript
ElementUI中el-tree节点的操作的实现
Feb 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
开启CURL扩展,让服务器支持PHP curl函数(远程采集)
2011/03/19 PHP
PHP设计模式 注册表模式
2012/02/05 PHP
PHP限制页面只能在微信自带浏览器访问的代码
2014/01/15 PHP
PHP使用in_array函数检查数组中是否存在某个值
2015/03/25 PHP
Zend Framework动作助手Redirector用法实例详解
2016/03/05 PHP
Yii全局函数用法示例
2017/01/22 PHP
用roll.js实现的图片自动滚动+鼠标触动的特效
2007/03/18 Javascript
JQuery 学习笔记 选择器之一
2009/07/23 Javascript
javaScript parseInt字符转化为数字函数使用小结
2009/11/05 Javascript
JavaScript Distilled 基础知识与函数
2010/04/07 Javascript
关于跨站脚本攻击问题
2011/12/22 Javascript
JavaScript获取元素尺寸和大小操作总结
2015/02/27 Javascript
手机开发必备技巧:javascript及CSS功能代码分享
2015/05/25 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
2015/11/09 Javascript
浅谈移动端之js touch事件 手势滑动事件
2016/11/07 Javascript
javascript 秒表计时器实现代码
2017/03/09 Javascript
jquery单击文字或图片内容放大并居中显示
2017/06/23 jQuery
浅谈关于axios和session的一些事
2017/07/13 Javascript
vue 中directive功能的简单实现
2018/01/05 Javascript
深入理解JavaScript的async/await
2018/08/05 Javascript
node.js实现简单的压缩/解压缩功能示例
2019/11/05 Javascript
微信小程序云函数添加数据到数据库的方法
2020/03/04 Javascript
VUE中setTimeout和setInterval自动销毁案例
2020/09/07 Javascript
python3.5仿微软计算器程序
2020/03/30 Python
利用Python如何生成hash值示例详解
2017/12/20 Python
python多线程下信号处理程序示例
2019/05/31 Python
Python实现制度转换(货币,温度,长度)
2019/07/14 Python
python由已知数组快速生成新数组的方法
2020/04/08 Python
python 使用raw socket进行TCP SYN扫描实例
2020/05/05 Python
篮球比赛策划方案
2014/06/05 职场文书
幼儿园门卫岗位职责范本
2014/07/02 职场文书
入党积极分子党支部意见
2015/06/02 职场文书
摩登时代观后感
2015/06/03 职场文书
Java实现简易的分词器功能
2021/06/15 Java/Android
MongoDB误操作后使用oplog恢复数据
2022/04/11 MongoDB
JavaScript架构localStorage特殊场景下二次封装操作
2022/06/21 Javascript