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 相关文章推荐
做网页的一些技巧
Feb 01 Javascript
用javascript实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
Apr 20 Javascript
Prototype Selector对象学习
Jul 23 Javascript
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
Oct 24 Javascript
深入浅析react native es6语法
Dec 09 Javascript
jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用
Jan 23 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
Aug 19 Javascript
浅谈Angular路由守卫
Aug 26 Javascript
Vue 中对图片地址进行拼接的方法
Sep 03 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
Apr 29 Javascript
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
May 12 Javascript
关于ES6尾调用优化的使用
Sep 11 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中strtotime函数使用方法分享
2012/01/10 PHP
PHP Curl多线程原理实例详解
2013/11/06 PHP
php Calender(日历)代码分享
2014/01/03 PHP
php对称加密算法示例
2014/05/07 PHP
PHP中spl_autoload_register()和__autoload()区别分析
2014/05/10 PHP
php采集神器cURL使用方法详解
2016/02/19 PHP
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
2010/07/17 Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
2013/01/16 Javascript
js异常捕获方法介绍
2013/04/10 Javascript
一个CSS+jQuery实现的放大缩小动画效果
2014/02/19 Javascript
JavaScript中的6种运算符总结
2014/10/16 Javascript
js实现文章文字大小字号功能完整实例
2014/11/01 Javascript
jQuery中animate动画第二次点击事件没反应
2015/05/07 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
2015/08/01 Javascript
js实现密码强度检测【附示例】
2016/03/30 Javascript
轮播的简单实现方法
2016/07/28 Javascript
jQuery基于排序功能实现上移、下移的方法
2016/11/26 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
2016/12/16 Javascript
nodejs之get/post请求的几种方式小结
2017/07/26 NodeJs
初探JavaScript 面向对象(推荐)
2017/09/03 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
2017/09/19 Javascript
select获取下拉框的值 下拉框默认选中方法
2018/02/28 Javascript
React key值的作用和使用详解
2018/08/23 Javascript
angularJs中json数据转换与本地存储的实例
2018/10/08 Javascript
小程序外卖订单界面的示例代码
2019/12/30 Javascript
python中反射用法实例
2015/03/27 Python
利用Python代码实现数据可视化的5种方法详解
2018/03/25 Python
python实现旋转和水平翻转的方法
2018/10/25 Python
python实现杨氏矩阵查找
2019/03/02 Python
Python 正则表达式爬虫使用案例解析
2019/09/23 Python
Python将QQ聊天记录生成词云的示例代码
2021/02/10 Python
用CSS3实现无限循环的无缝滚动的实例代码
2017/07/04 HTML / CSS
白血病募捐倡议书
2014/05/14 职场文书
个人四风问题整改措施
2014/10/24 职场文书
详解Python函数print用法
2021/06/18 Python
缓存替换策略及应用(以Redis、InnoDB为例)
2021/07/25 Redis