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 相关文章推荐
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
Mar 11 Javascript
JQuery对class属性的操作实现按钮开关效果
Oct 11 Javascript
javascript动态创建表格及添加数据实例详解
May 13 Javascript
基于jQuery实现网页打印功能
Dec 01 Javascript
js实现炫酷的左右轮播图
Jan 18 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
详解angularJS自定义指令间的相互交互
Jul 05 Javascript
编写React组件项目实践分析
Mar 04 Javascript
让Vue也可以使用Redux的方法
May 23 Javascript
JS实现可针对算术表达式求值的计算器功能示例
Sep 04 Javascript
Puppeteer环境搭建的详细步骤
Sep 21 Javascript
javascript实现导航栏分页效果
Jun 27 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 FTP操作类代码( 上传、拷贝、移动、删除文件/创建目录)
2014/05/10 PHP
Parse正式发布开源PHP SDK
2014/08/11 PHP
php的闭包(Closure)匿名函数详解
2015/02/22 PHP
php 问卷调查结果统计
2015/10/08 PHP
PHP redis实现超迷你全文检索
2017/03/04 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
javascript 日期时间函数(经典+完善+实用)
2009/05/27 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
2012/07/03 Javascript
如何从jQuery的ajax请求中删除X-Requested-With
2013/12/11 Javascript
javascript自定义的addClass()方法
2014/05/28 Javascript
javascript的事件触发器介绍的实现
2014/06/05 Javascript
JavaScript实现的石头剪刀布游戏源码分享
2014/08/22 Javascript
使用javascript提交form表单方法汇总
2015/06/25 Javascript
js实现移动端导航点击自动滑动效果
2017/07/18 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
2018/02/24 Javascript
微信开发之微信jssdk录音功能开发示例
2018/10/22 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
2020/11/05 Javascript
Python使用PIL库实现验证码图片的方法
2016/03/11 Python
Python 通过pip安装Django详细介绍
2017/04/28 Python
详解windows python3.7安装numpy问题的解决方法
2018/08/13 Python
浅谈python图片处理Image和skimage的区别
2019/08/04 Python
Python调用系统命令os.system()和os.popen()的实现
2020/12/31 Python
浅谈CSS3动画的回调处理
2016/07/21 HTML / CSS
生日派对邀请函
2014/01/13 职场文书
浪费资源的建议书
2014/03/12 职场文书
飘柔洗发水广告词
2014/03/14 职场文书
保护环境倡议书
2014/04/14 职场文书
新品发布会策划方案
2014/06/08 职场文书
三月学雷锋活动总结
2014/06/26 职场文书
出生医学证明书
2014/09/15 职场文书
2014年食堂工作总结
2014/11/20 职场文书
2015年市场部工作总结
2015/04/30 职场文书
机关单位保密工作责任书
2015/05/11 职场文书
小学四年级作文之人物作文
2019/11/06 职场文书
Go语言切片前或中间插入项与内置copy()函数详解
2021/04/27 Golang