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 Demo模态窗口
Dec 06 Javascript
jquery 读取页面load get post ajax 四种方式代码写法
Apr 02 Javascript
基于jquery的无限级联下拉框js插件
Oct 29 Javascript
jQuery.extend 函数详解
Feb 03 Javascript
浅谈jQuery为哪般去掉了浏览器检测
Aug 29 Javascript
详解Js模板引擎(TrimPath)
Nov 22 Javascript
EasyUI学习之Combobox下拉列表(1)
Dec 29 Javascript
AngularJS之页面跳转Route实例代码
Mar 10 Javascript
angular2模块和共享模块详解
Apr 08 Javascript
对vue 键盘回车事件的实例讲解
Aug 25 Javascript
js实现简单的点名器随机色实例代码
Sep 20 Javascript
webpack介绍使用配置教程详解webpack介绍和使用
Jun 25 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_xmlhttp 乱码问题解决方法
2009/08/07 PHP
PHP 如何利用phpexcel导入数据库
2013/08/24 PHP
C#使用PHP服务端的Web Service通信实例
2014/04/08 PHP
phpstudy隐藏index.php的方法
2020/09/21 PHP
Javascript下的keyCode键码值表
2007/04/10 Javascript
JSQL 基于客户端的成绩统计实现方法
2010/05/05 Javascript
jquery弹出层类代码分享
2013/12/27 Javascript
Jquery如何实现点击时高亮显示代码
2014/01/22 Javascript
JS简单实现表格排序功能示例
2016/12/20 Javascript
Bootstrap页面标题Page Header的实现方法
2017/03/22 Javascript
ReactNative之键盘Keyboard的弹出与消失示例
2017/07/11 Javascript
基于复选框demo(分享)
2017/09/27 Javascript
Vue实现active点击切换方法
2018/03/16 Javascript
js replace 全局替换的操作方法
2018/06/12 Javascript
vuejs前后端数据交互之从后端请求数据的实例
2018/08/11 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
2018/10/09 Javascript
跨域请求两种方法 jsonp和cors的实现
2018/11/11 Javascript
jQuery实现购物车的总价计算和总价传值功能
2018/11/28 jQuery
详细介绍解决vue和jsp结合的方法
2020/02/06 Javascript
解决vue 给window添加和移除resize事件遇到的坑
2020/07/21 Javascript
[49:59]KG vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python3实现逐字输出的方法
2019/01/23 Python
python 扩展print打印文件路径和当前时间信息的实例代码
2019/10/11 Python
英国时尚优质的女装:Hope Fashion
2018/08/14 全球购物
洛杉矶时尚女装系列:J.ING US
2019/03/17 全球购物
AMAVII眼镜官网:时尚和设计师太阳镜
2019/05/05 全球购物
亚马逊巴西站:Amazon.com.br
2019/09/22 全球购物
社区活动邀请函范文
2014/01/29 职场文书
区优秀教师事迹材料
2014/02/10 职场文书
今冬明春火灾防控工作方案
2014/05/29 职场文书
欢迎词范文
2015/01/27 职场文书
漂亮妈妈观后感
2015/06/08 职场文书
2016年感恩教师节活动总结
2016/04/01 职场文书
解决golang post文件时Content-Type出现的问题
2021/05/02 Golang
redis 查看所有的key方式
2021/05/07 Redis
MySQL 如何设计统计数据表
2021/06/15 MySQL