jQuery页面滚动浮动层智能定位实例代码


Posted in Javascript onAugust 23, 2011

HTML代码:

<div class="float" id="float"> 
我是个腼腆羞涩的浮动层... 
</div>

JS代码:
$.fn.smartFloat = function() { 
var position = function(element) { 
var top = element.position().top, pos = element.css("position"); 
$(window).scroll(function() { 
var scrolls = $(this).scrollTop(); 
if (scrolls > top) { 
if (window.XMLHttpRequest) { 
element.css({ 
position: "fixed", 
top: 0 
}); 
} else { 
element.css({ 
top: scrolls 
}); 
} 
}else { 
element.css({ 
position: "absolute", 
top: top 
}); 
} 
}); 
}; 
return $(this).each(function() { 
position($(this)); 
}); 
}; 
//绑定 
$("#float").smartFloat();
Javascript 相关文章推荐
JavaScript 面向对象的之私有成员和公开成员
May 04 Javascript
jQuery autocomplate 自扩展插件、自动完成示例代码
Mar 28 Javascript
一个JavaScript的求爱小特效
May 09 Javascript
JavaScript数组实现数据结构中的队列与堆栈
May 26 Javascript
基于JS实现数字+字母+中文的混合排序方法
Jun 06 Javascript
gulp解决跨域的配置文件问题
Jun 08 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
Oct 11 Javascript
Vue入门之animate过渡动画效果
Apr 08 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
Nov 21 Javascript
详解Puppeteer前端自动化测试实践
Feb 21 Javascript
ES5新增数组的实现方法
May 12 Javascript
JavaScript继承的三种方法实例
May 12 Javascript
jqGrid jQuery 表格插件测试代码
Aug 23 #Javascript
30个精美的jQuery幻灯片效果插件和教程
Aug 23 #Javascript
js 函数的副作用分析
Aug 23 #Javascript
javascript 运算数的求值顺序
Aug 23 #Javascript
读jQuery之十四 (触发事件核心方法)
Aug 23 #Javascript
读jQuery之十三 添加事件和删除事件的核心方法
Aug 23 #Javascript
基于jquery实现的类似百度搜索的输入框自动完成功能
Aug 23 #Javascript
You might like
PHP的栏目导航程序
2006/10/09 PHP
php 用sock技术发送邮件的函数
2007/07/21 PHP
php实现refresh刷新页面批量导入数据的方法
2014/12/23 PHP
学习php设计模式 php实现策略模式(strategy)
2015/12/07 PHP
Zend Framework实现具有基本功能的留言本(附demo源码下载)
2016/03/22 PHP
JavaScript 判断指定字符串是否为有效数字
2010/05/11 Javascript
js分页工具实例
2015/01/28 Javascript
JavaScript中用于生成随机数的Math.random()方法
2015/06/15 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
2017/07/07 Javascript
vue slot 在子组件中显示父组件传递的模板
2018/03/02 Javascript
react以create-react-app为基础创建项目
2018/03/14 Javascript
ndm:NPM的桌面GUI应用程序
2018/10/15 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
2019/02/26 Javascript
js模拟实现烟花特效
2020/03/10 Javascript
原生JS实现烟花效果
2020/03/10 Javascript
Python深入学习之装饰器
2014/08/31 Python
python使用any判断一个对象是否为空的方法
2014/11/19 Python
代码讲解Python对Windows服务进行监控
2018/02/11 Python
Python贪心算法实例小结
2018/04/22 Python
PyQt5 实现给窗口设置背景图片的方法
2019/06/13 Python
简单了解Python3里的一些新特性
2019/07/13 Python
python实现获取单向链表倒数第k个结点的值示例
2019/10/24 Python
Python3 shelve对象持久存储原理详解
2020/03/23 Python
python使用for...else跳出双层嵌套循环的方法实例
2020/05/17 Python
Python sklearn中的.fit与.predict的用法说明
2020/06/28 Python
台湾菁英交友:结识黄金单身的台湾人
2018/01/22 全球购物
高校毕业生自我鉴定
2013/10/27 职场文书
募捐倡议书怎么写
2014/05/14 职场文书
总经理人事任命书
2014/06/05 职场文书
土地租赁意向书
2014/07/30 职场文书
村创先争优活动总结
2014/08/28 职场文书
2015年会计个人工作总结
2015/04/02 职场文书
小兵张嘎电影观后感
2015/06/03 职场文书
小学语文新课改心得体会
2016/01/22 职场文书
《海上日出》教学反思
2016/02/23 职场文书
python神经网络Xception模型
2022/05/06 Python