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公告滚动+AJAX后台得到数据
Apr 14 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
Nov 07 Javascript
js控制鼠标事件移动及移出效果显示
Oct 19 Javascript
js数组依据下标删除元素
Apr 14 Javascript
JavaScript实现点击文字切换登录窗口的方法
May 11 Javascript
创建你的第一个AngularJS应用的方法
Jun 16 Javascript
jQuery EasyUI Dialog拖不下来如何解决
Sep 28 Javascript
jQuery实现自动输入email、时间和域名的方法
Aug 24 Javascript
基于easyui checkbox 的一些操作处理方法
Jul 10 Javascript
js微信分享实现代码
Oct 11 Javascript
Vue单页及多页应用全局配置404页面实践记录
May 22 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
May 09 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
mysql中存储过程、函数的一些问题
2007/02/14 PHP
php eval函数用法总结
2012/10/31 PHP
PHP数据过滤的方法
2013/10/30 PHP
WordPress主题中添加文章列表页页码导航的PHP代码实例
2015/12/22 PHP
Yii框架日志操作图文与实例详解
2019/09/09 PHP
js控制div及网页相关属性的代码
2009/12/19 Javascript
模拟多级复选框效果的jquery代码
2013/08/13 Javascript
jquery form表单序列化为对象的示例代码
2014/03/05 Javascript
JS中判断null、undefined与NaN的方法
2014/03/24 Javascript
JS实现div居中示例
2014/04/17 Javascript
JavaScript中伪协议 javascript:使用探讨
2014/07/18 Javascript
js和jquery设置disabled属性为true使按钮失效
2014/08/07 Javascript
javascript实现图片上传前台页面
2015/08/18 Javascript
JS+CSS实现滑动切换tab菜单效果
2015/08/25 Javascript
ionic2 tabs 图标自定义实例
2017/03/08 Javascript
纯原生js实现贪吃蛇游戏
2020/04/16 Javascript
vue页面切换到滚动页面显示顶部的实例
2018/03/13 Javascript
ES2020 新特性(种草)
2020/01/12 Javascript
[48:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 VG vs KG
2018/03/31 DOTA
基于Python代码编辑器的选用(详解)
2017/09/13 Python
python导入坐标点的具体操作
2019/05/10 Python
Brydge英国:适用于Apple iPad和Microsoft Surface Pro的蓝牙键盘
2019/05/16 全球购物
物业管理公司实习生自我鉴定
2013/09/19 职场文书
求职简历中的自我评价分享
2013/12/08 职场文书
音乐专业自荐信
2014/02/07 职场文书
股东合作协议书范本
2014/04/14 职场文书
聘用意向书
2014/07/29 职场文书
学校领导干部民主生活会整改方案
2014/09/29 职场文书
2014年组织委员工作总结
2014/12/01 职场文书
英语辞职信怎么写
2015/02/28 职场文书
2015年公司行政后勤工作总结
2015/05/20 职场文书
起诉书范文
2015/05/20 职场文书
《老人与海鸥》教学反思
2016/02/16 职场文书
Python 使用dict实现switch的操作
2021/04/07 Python
详解如何使用Node.js实现热重载页面
2021/05/06 Javascript
解决vue-router的beforeRouteUpdate不能触发
2022/04/14 Vue.js