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 相关文章推荐
Ext 今日学习总结
Sep 19 Javascript
提高javascript效率 一次判断,而不要次次判断
Mar 30 Javascript
JQuery each()函数如何优化循环DOM结构的性能
Dec 10 Javascript
JS保存、读取、换行、转Json报错处理方法
Jun 14 Javascript
jQuery之折叠面板的深入解析
Jun 19 Javascript
jQuery中bind,live,delegate与one方法的用法及区别解析
Dec 30 Javascript
jQuery.deferred对象使用详解
Mar 18 Javascript
jQuery点击输入框显示验证码图片
May 19 Javascript
Angularjs中的ui-bootstrap的使用教程
Feb 19 Javascript
js实现分页功能
May 24 Javascript
vue2 全局变量的设置方法
Mar 09 Javascript
Webpack之tree-starking 解析
Sep 11 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
动漫女神老婆无限好,但日本女生可能就不是这么一回事了!
2020/03/04 日漫
PHP 7的一些引人注目的新特性简单介绍
2015/11/08 PHP
从新浪弄下来的全屏广告代码 与使用说明
2007/03/15 Javascript
XML的代替者----JSON
2007/07/21 Javascript
Javascript打印网页部分内容的脚本
2008/11/17 Javascript
Dojo 学习笔记入门篇 First Dojo Example
2009/11/15 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
2016/09/08 Javascript
浅谈js中的引用和复制(传值和传址)
2016/09/18 Javascript
jQuery实现锚点向下平滑滚动特效示例
2017/08/29 jQuery
vue生成token并保存到本地存储中
2018/07/17 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
2018/10/25 Javascript
JavaScript错误处理操作实例详解
2019/01/04 Javascript
vue2.0项目集成Cesium的实现方法
2019/07/30 Javascript
js实现简单页面全屏
2019/09/17 Javascript
[07:38]2014DOTA2国际邀请赛 Newbee顺利挺进胜者组赛后专访
2014/07/15 DOTA
详细介绍Python语言中的按位运算符
2013/11/26 Python
Python遍历目录的4种方法实例介绍
2015/04/13 Python
使用Python求解最大公约数的实现方法
2015/08/20 Python
python3.4爬虫demo
2019/01/22 Python
详解python执行shell脚本创建用户及相关操作
2019/04/11 Python
Jupyter Notebook远程登录及密码设置操作
2020/04/10 Python
python中selenium库的基本使用详解
2020/07/31 Python
基于html5绘制圆形多角图案
2016/04/21 HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
2020/05/19 HTML / CSS
canvas画图被放大且模糊的解决方法
2020/08/11 HTML / CSS
荷兰睡眠专家:Beter Bed
2020/11/23 全球购物
网友共享的几个面试题关于Java和Unix等方面的
2016/09/08 面试题
大学校园活动策划书
2014/02/04 职场文书
事业单位年度考核评语
2014/12/31 职场文书
对领导班子的意见和建议
2015/06/08 职场文书
房屋买卖定金协议书
2016/03/21 职场文书
导游词之长城八达岭
2019/09/24 职场文书
Nginx服务器如何设置url链接
2021/03/31 Servers
golang 生成对应的数据表struct定义操作
2021/04/28 Golang
golang 定时任务方面time.Sleep和time.Tick的优劣对比分析
2021/05/05 Golang
Python使用mitmproxy工具监控手机 下载手机小视频
2022/04/18 Python