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 DOM编程实例(智播客学习)
Nov 23 Javascript
分享14个很酷的jQuery导航菜单插件
Apr 25 Javascript
JS中window.open全屏命令解析及使用示例
Dec 11 Javascript
详解JavaScript正则表达式中的global属性的使用
Jun 16 Javascript
jQuery实现输入框下拉列表树插件特效代码分享
Aug 27 Javascript
JS遍历数组及打印数组实例分析
Jan 21 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
Jan 22 Javascript
AngularJS自定义插件实现网站用户引导功能示例
Nov 07 Javascript
js实现文字选中分享功能
Jan 25 Javascript
Vue中自定义全局组件的实现方法
Dec 08 Javascript
Node.js搭建WEB服务器的示例代码
Aug 15 Javascript
详解如何在webpack中做预渲染降低首屏空白时间
Aug 22 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数组交集的优化代码分析
2011/03/06 PHP
PHP输出日历表代码实例
2015/03/27 PHP
php检查字符串中是否有外链的方法
2015/07/29 PHP
如何使用php等比例缩放图片
2016/10/12 PHP
返回对象在当前级别中是第几个元素的实现代码
2011/01/20 Javascript
jqgrid 简单学习笔记
2011/05/03 Javascript
jquery模拟按下回车实现代码
2011/09/20 Javascript
关于jquery css的使用介绍
2013/04/18 Javascript
jQuery 获取兄弟元素的几种不错方法
2014/05/23 Javascript
Express作者TJ告别Node.js奔向Go
2014/07/14 Javascript
javascript里使用php代码实例
2014/12/13 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
2015/10/14 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
2015/10/26 Javascript
js仿微博动态栏功能
2017/02/22 Javascript
详解Vue监听数据变化原理
2017/03/08 Javascript
angular中实现控制器之间传递参数的方式
2017/04/24 Javascript
解决vue-cli + webpack 新建项目出错的问题
2018/03/20 Javascript
vue开发环境配置跨域的方法步骤
2019/01/16 Javascript
vue父子组件的通信方法(实例详解)
2019/11/10 Javascript
记一次vue跨域的解决
2020/10/21 Javascript
[01:01:18]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#2COL VS LGD
2016/03/03 DOTA
python分析apache访问日志脚本分享
2015/02/26 Python
Python之日期与时间处理模块(date和datetime)
2017/02/16 Python
python实现简单tftp(基于udp协议)
2018/07/30 Python
对python中的argv和argc使用详解
2018/12/15 Python
Python删除n行后的其他行方法
2019/01/28 Python
说说如何遍历Python列表的方法示例
2019/02/11 Python
解决TensorFlow程序无限制占用GPU的方法
2020/06/30 Python
matplotlib.pyplot.plot()参数使用详解
2020/07/28 Python
Linux的主要特性
2016/09/03 面试题
30岁生日感言
2014/01/25 职场文书
幼儿教师求职信
2014/05/24 职场文书
公司新人试用期自我评价
2014/09/17 职场文书
2015年员工工作表现评语
2015/03/25 职场文书
致短跑运动员加油稿
2015/07/21 职场文书
SQL Server中搜索特定的对象
2022/05/25 SQL Server