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 相关文章推荐
精解window.setTimeout()&amp;window.setInterval()使用方式与参数传递问题!
Nov 23 Javascript
Prototype Date对象 学习
Jul 12 Javascript
jquery实现的导航固定效果
Apr 28 Javascript
jQuery定义背景动态切换效果的方法
Mar 23 Javascript
浅谈javascript事件取消和阻止冒泡
May 26 Javascript
简介JavaScript中strike()方法的使用
Jun 08 Javascript
超链接怎么正确调用javascript函数
May 23 Javascript
Ionic快速安装教程
Jun 03 Javascript
JS实现自动阅读单词(有道单词本添加功能)
Nov 14 Javascript
Vue axios设置访问基础路径方法
Sep 19 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
Nov 05 Javascript
vue项目开启Gzip压缩和性能优化操作
Oct 26 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加密函数 Javascript/Js 解密函数
2013/09/23 PHP
thinkphp3.2中Lite文件替换框架入口文件或应用入口文件的方法
2015/05/21 PHP
PHP实现截取中文字符串不出现?号的解决方法
2016/12/29 PHP
关于Laravel Route重定向的一个注意点
2017/01/16 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
javascript XML数据显示为HTML一例
2008/12/23 Javascript
JS在IE和FireFox之间常用函数的区别小结
2010/03/12 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
2012/10/11 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
2013/03/05 Javascript
自己写了一个展开和收起的多更能型的js效果
2013/03/05 Javascript
JS图片切换的具体方法(带缩略图版)
2013/11/12 Javascript
JS小游戏之极速快跑源码详解
2014/09/25 Javascript
分享五个有用的jquery小技巧
2015/10/08 Javascript
Bootstrap实现响应式导航栏效果
2015/12/28 Javascript
xcode中获取js文件的路径方法(推荐)
2016/11/05 Javascript
利用Angular.js编写公共提示模块的方法教程
2017/05/28 Javascript
vue中axios处理http发送请求的示例(Post和get)
2017/10/13 Javascript
实例解析ES6 Proxy使用场景介绍
2018/01/08 Javascript
elementUI table表格动态合并的示例代码
2019/05/15 Javascript
深入了解JavaScript 私有化
2019/05/30 Javascript
Python的Django框架中的URL配置与松耦合
2015/07/15 Python
Python多线程、异步+多进程爬虫实现代码
2016/02/17 Python
Python中getpass模块无回显输入源码解析
2018/01/11 Python
详解Python locals()的陷阱
2019/03/26 Python
pandas.DataFrame.drop_duplicates 用法介绍
2020/07/06 Python
html5指南-1.html5全局属性(html5 global attributes)深入理解
2013/01/07 HTML / CSS
HTML5使用drawImage()方法绘制图像
2014/06/23 HTML / CSS
阿迪达斯奥地利官方商城:adidas.at
2016/10/16 全球购物
传播学专业毕业生自荐信
2013/11/04 职场文书
20年同学聚会邀请函
2014/02/04 职场文书
倡议书的写法
2014/08/30 职场文书
私用公车造成事故检讨书
2014/11/16 职场文书
土地租赁协议书
2015/01/29 职场文书
2015-2016年小学教导工作总结
2015/07/21 职场文书
python中pandas.read_csv()函数的深入讲解
2021/03/29 Python
go语言中json数据的读取和写出操作
2021/04/28 Golang