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 相关文章推荐
日期函数扩展类Ver0.1.1
Sep 07 Javascript
javascript按位非运算符的使用方法
Nov 14 Javascript
JavaScript Math.ceil 方法(对数值向上取整)
Jan 09 Javascript
JavaScript如何动态创建table表格
Aug 02 Javascript
jquery中object对象循环遍历的方法
Dec 18 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
Jun 14 Javascript
封装获取dom元素的简单实例
Jul 08 Javascript
Jq通过td获取同行其它列td的方法
Oct 05 Javascript
js+css3实现旋转效果
Jan 20 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
Jan 22 Javascript
bootstrap精简教程_动力节点Java学院整理
Jul 14 Javascript
layui--select使用以及下拉框实现键盘选择的例子
Sep 24 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迅雷、快车、旋风下载专用链转换代码
2010/06/15 PHP
解决PHP mysql_query执行超时(Fatal error: Maximum execution time …)
2013/07/03 PHP
认识延迟时间为0的setTimeout
2008/05/16 Javascript
jQuery 学习第五课 Ajax 使用说明
2010/05/17 Javascript
jquery获取tr中控件值并操作tr实现思路
2013/03/27 Javascript
深入理解setTimeout函数和setInterval函数
2016/05/20 Javascript
jQuery根据表单name获取值的方法
2016/05/24 Javascript
JavaScript中的事件委托及好处
2016/07/12 Javascript
DOM中事件处理概览与原理的全面解析
2016/08/16 Javascript
JS仿京东移动端手指拨动切换轮播图效果
2020/04/10 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
2017/11/08 Javascript
JS 实现百度搜索功能
2018/02/01 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
2018/03/28 Javascript
jquery实现的简单轮播图功能【适合新手】
2018/08/17 jQuery
node实现爬虫的几种简易方式
2019/08/22 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
2020/02/25 Javascript
Vue实现购物小球抛物线的方法实例
2020/11/22 Vue.js
[50:01]Ti4 冒泡赛第二天 NEWBEE vs Titan
2014/07/15 DOTA
Python正则表达式的使用范例详解
2014/08/08 Python
python 基础教程之Map使用方法
2017/01/17 Python
Python实现的FTP通信客户端与服务器端功能示例
2018/03/28 Python
详解将Django部署到Centos7全攻略
2018/09/26 Python
python 使用 requests 模块发送http请求 的方法
2018/12/09 Python
python匿名函数用法实例分析
2019/08/03 Python
Python matplotlib图例放在外侧保存时显示不完整问题解决
2020/07/28 Python
Python 使用xlwt模块将多行多列数据循环写入excel文档的操作
2020/11/10 Python
CSS3实现闪烁动画效果的方法
2015/02/09 HTML / CSS
详解CSS3 Media Queries中媒体属性的使用
2016/02/29 HTML / CSS
香港个人化生活购物网站:Ballyhoo Limited
2016/09/10 全球购物
在c#中using和new这两个关键字有什么意义
2013/05/19 面试题
商务经理岗位职责
2014/07/30 职场文书
群众路线组织生活会发言材料
2014/10/17 职场文书
保护动物的宣传语
2015/07/13 职场文书
启迪人心的励志语录:脾气永远不要大于本事
2020/01/02 职场文书
JS异步堆栈追踪之为什么await胜过Promise
2021/04/28 Javascript
详解Oracle数据库中自带的所有表结构(sql代码)
2021/11/20 Oracle