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与jquery中跳出循环的区别总结
Nov 04 Javascript
ECMAScript6中Map/WeakMap详解
Jun 12 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
Jun 26 Javascript
jquery实现具有嵌套功能的选项卡
Feb 12 Javascript
Uploadify上传文件方法
Mar 16 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
Sep 02 Javascript
JS随机数产生代码分享
Feb 24 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
Mar 15 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
May 12 Javascript
es6数组includes()用法实例分析
Apr 18 Javascript
js实现跳一跳小游戏
Jul 31 Javascript
vue使用vant中的checkbox实现全选功能
Nov 17 Vue.js
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
咖啡风味 世界咖啡主要分布分布 咖啡的生长要求
2021/03/06 新手入门
用来给图片加水印的PHP类
2008/04/09 PHP
PHPMailer安装方法及简单实例
2008/11/25 PHP
php面向对象全攻略 (十六) 对象的串行化
2009/09/30 PHP
PHP开发框架kohana中处理ajax请求的例子
2014/07/14 PHP
递归实现php数组转xml的代码分享
2015/05/14 PHP
使用PHP生成二维码的方法汇总
2015/07/22 PHP
php封装的mysqli类完整实例
2016/10/18 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
javascript ready和load事件的区别示例介绍
2013/08/30 Javascript
javascript与有限状态机详解
2014/05/08 Javascript
jQuery入门介绍之基础知识
2015/01/13 Javascript
理解 JavaScript Scoping &amp; Hoisting(二)
2015/11/18 Javascript
JavaScript基于原型链的继承
2016/06/22 Javascript
BootStrap组件之进度条的基本用法
2017/01/19 Javascript
详解JavaScript对象的深浅复制
2017/03/30 Javascript
详解微信小程序中组件通讯
2018/10/30 Javascript
Django+vue跨域问题解决的详细步骤
2019/01/20 Javascript
了解javascript中let和var及const关键字的区别
2019/05/24 Javascript
用Python实现数据的透视表的方法
2018/11/16 Python
Django admin.py 在修改/添加表单界面显示额外字段的方法
2019/08/22 Python
关于Python内存分配时的小秘密分享
2019/09/05 Python
使用python快速实现不同机器间文件夹共享方式
2019/12/22 Python
Python基于模块Paramiko实现SSHv2协议
2020/04/28 Python
HTML5中使用postMessage实现两个网页间传递数据
2016/06/22 HTML / CSS
HTML5 拖放功能实现代码
2016/07/14 HTML / CSS
日本乐天官方海外转运服务:Rakuten Global Express
2018/11/30 全球购物
解释DataSet(ds) 和 ds as DataSet 的含义
2014/07/27 面试题
计算机专业毕业生的自我评价
2013/11/18 职场文书
物业管理员岗位职责范文
2013/11/25 职场文书
中专自我鉴定
2014/02/05 职场文书
《祁黄羊》教学反思
2014/04/22 职场文书
2014年民政局关于保密工作整改措施
2014/09/19 职场文书
部队个人年终总结
2015/03/02 职场文书
python使用tkinter实现透明窗体上绘制随机出现的小球(实例代码)
2021/05/17 Python
div与span之间的区别与使用介绍
2021/12/06 HTML / CSS