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 相关文章推荐
js加减乘除丢失精度问题解决方法
May 16 Javascript
jQuery实现鼠标划过修改样式的方法
Apr 14 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
Apr 19 Javascript
微信小程序 for 循环详解
Oct 09 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
Nov 10 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
Nov 25 Javascript
js 转义字符及URI编码详解
Feb 28 Javascript
node.js爬虫爬取拉勾网职位信息
Mar 14 Javascript
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
ES6关于Promise的用法详解
May 07 Javascript
垃圾回收器的相关知识点总结
May 13 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
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
一个用mysql_odbc和php写的serach数据库程序
2006/10/09 PHP
初步介绍PHP扩展开发经验分享
2012/09/06 PHP
php curl登陆qq后获取用户信息时证书错误
2015/02/03 PHP
php实现递归抓取网页类实例
2015/04/03 PHP
Thinkphp5.0框架使用模型Model的获取器、修改器、软删除数据操作示例
2019/10/11 PHP
jQuery 版元素拖拽原型代码
2011/04/25 Javascript
Tab页界面 用jQuery及Ajax技术实现(php后台)
2011/10/12 Javascript
jQuery让控件左右移动的三种实现方法
2013/09/08 Javascript
TypeScript具有的几个不同特质
2015/04/07 Javascript
Bootstrap实现导航栏的2种方式
2016/11/28 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
2017/05/05 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
2017/10/21 Javascript
解析Vue.js中的组件
2018/02/02 Javascript
详解Require.js与Sea.js的区别
2018/08/05 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
2018/10/17 Javascript
vue双向绑定及观察者模式详解
2019/03/19 Javascript
详解JavaScript中的坐标和距离
2019/05/27 Javascript
Vue的双向数据绑定实现原理解析
2020/02/17 Javascript
js实现全选和全不选功能
2020/07/28 Javascript
原生js+canvas实现贪吃蛇效果
2020/08/02 Javascript
[50:05]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
virtualenv 指定 python 解释器的版本方法
2018/10/25 Python
pycharm 解除默认unittest模式的方法
2018/11/30 Python
python 去除二维数组/二维列表中的重复行方法
2019/01/23 Python
python笔记之mean()函数实现求取均值的功能代码
2019/07/05 Python
Python全局锁中如何合理运用多线程(多进程)
2019/11/06 Python
scrapy爬虫:scrapy.FormRequest中formdata参数详解
2020/04/30 Python
HTML5 video 视频标签使用介绍
2014/02/03 HTML / CSS
兰芝美国网上商城:购买LANEIGE睡眠面膜等
2017/06/30 全球购物
香港草莓网:Strawberrynet香港
2019/05/10 全球购物
英国排名第一的冲浪店:Ann’s Cottage
2020/06/21 全球购物
杭州-飞时达软件有限公司.net笔面试
2012/04/28 面试题
社区安全生产月活动总结
2014/07/05 职场文书
2014群众路线学习笔记
2014/11/06 职场文书
建党伟业电影观后感
2015/06/01 职场文书
Android存储中最基本的文件存储方式
2022/04/30 Java/Android