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 相关文章推荐
jquery 常用操作整理 基础入门篇
Oct 14 Javascript
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
Nov 28 Javascript
seajs1.3.0源码解析之module依赖有序加载
Nov 07 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
Jul 09 Javascript
JavaScript中使用document.write向页面输出内容实例
Oct 16 Javascript
jquery.validate使用时遇到的问题
May 25 Javascript
Bootstrap树形组件jqTree的简单封装
Jan 25 Javascript
node.JS md5加密中文与php结果不一致的解决方法
May 05 Javascript
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
详解利用Angular实现多团队模块化SPA开发框架
Nov 27 Javascript
JavaScript arguments.callee作用及替换方案详解
Sep 02 Javascript
JavaScript 防篡改对象的用法示例
Apr 24 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使用CURL不依赖COOKIEJAR获取COOKIE的方法
2015/06/17 PHP
PHP中如何使用session实现保存用户登录信息
2015/10/20 PHP
在IIS下安装PHP扩展的方法(超简单)
2017/04/10 PHP
详解将数据从Laravel传送到vue的四种方式
2019/10/16 PHP
网页中可关闭的漂浮窗口实现可自行调节
2013/08/20 Javascript
利用javascript打开模态对话框(示例代码)
2014/01/11 Javascript
为jQuery添加Webkit的触摸的方法分享
2014/02/02 Javascript
node.js中格式化数字增加千位符的几种方法
2015/07/03 Javascript
jQuery 局部div刷新和全局刷新方法总结
2016/10/05 Javascript
利用JQuery阻止事件冒泡
2016/12/01 Javascript
懒加载实现的分页&amp;&amp;网站footer自适应
2016/12/21 Javascript
详解jQuery事件
2017/01/13 Javascript
AngularJS表格样式简单设置方法示例
2017/03/03 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
2017/08/25 Javascript
vue中的数据绑定原理的实现
2018/07/02 Javascript
React-router4路由监听的实现
2018/08/07 Javascript
微信小程序云开发之云函数详解
2019/05/16 Javascript
Python中几个比较常见的名词解释
2015/07/04 Python
tensorflow 获取模型所有参数总和数量的方法
2018/06/14 Python
python多任务之协程的使用详解
2019/08/26 Python
Python Numpy库常见用法入门教程
2020/01/16 Python
OpenCV+python实现膨胀和腐蚀的示例
2020/12/21 Python
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
2016/03/14 HTML / CSS
HTML5 Canvas基本线条绘制的实例教程
2016/03/17 HTML / CSS
如何用Lucene索引数据库
2016/02/23 面试题
北京某公司的.net笔试题
2014/03/20 面试题
介绍一下常见的木马种类
2014/11/15 面试题
应届生幼儿园求职信
2013/11/12 职场文书
个人函授自我鉴定
2014/03/25 职场文书
批评与自我批评范文
2014/10/15 职场文书
介绍信样本
2015/01/31 职场文书
收入证明怎么写
2015/06/12 职场文书
小学生读书笔记
2015/07/01 职场文书
教你怎么用PyCharm为同一服务器配置多个python解释器
2021/05/31 Python
SQL写法--行行比较
2021/08/23 SQL Server
MYSQL如何查看操作日志详解
2022/05/30 MySQL