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.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
Oct 11 Javascript
cnblogs csdn 代码运行框实现代码
Nov 02 Javascript
通过继承IHttpHandle实现JS插件的组织与管理
Jul 13 Javascript
各情景下元素宽高的获取实现代码
Sep 13 Javascript
JavaScript使用focus()设置焦点失败的解决方法
Sep 03 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
Oct 29 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
Feb 19 Javascript
javascript每日必学之继承
Feb 23 Javascript
Bootstrap表单布局样式代码
May 31 Javascript
JavaScript中的this引用(推荐)
Aug 05 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
Oct 24 Javascript
JavaScript生成图形验证码
Aug 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 Smarty date_format [格式化时间日期]
2010/03/15 PHP
php伪静态之APACHE篇
2014/06/02 PHP
php生成随机数的三种方法
2014/09/10 PHP
老生常谈PHP中的数据结构:DS扩展
2017/07/17 PHP
解决在laravel中auth建立时候遇到的问题
2019/10/15 PHP
javascript 节点排序 2
2011/01/31 Javascript
jQuery验证插件validation使用指南
2015/04/21 Javascript
JavaScript如何禁止Backspace键
2015/12/02 Javascript
谈谈JavaScript类型系统之Math
2016/01/06 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
2016/10/27 Javascript
BootStrap 可编辑表Table格
2016/11/24 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
2016/12/22 Javascript
利用JQuery实现datatables插件的增加和删除行功能
2017/01/06 Javascript
原生JavaScript实现AJAX、JSONP
2017/02/07 Javascript
jQuery实现搜索页面关键字的功能
2017/02/16 Javascript
微信小程序页面间通信的5种方式
2017/03/31 Javascript
AngularJs定时器$interval 和 $timeout详解
2017/05/25 Javascript
vue结合Echarts实现点击高亮效果的示例
2018/03/17 Javascript
使用JS实现导航切换时高亮显示的示例讲解
2018/08/22 Javascript
vue  自定义组件实现通讯录功能
2018/09/30 Javascript
node 版本切换的实现
2020/02/02 Javascript
ES2020 已定稿,真实场景案例分析
2020/05/25 Javascript
[04:26]2014DOTA2国际邀请赛-Newbee顺利进入胜者组决赛 独家专访战神7
2014/07/19 DOTA
Python获取服务器信息的最简单实现方法
2015/03/05 Python
python xml.etree.ElementTree遍历xml所有节点实例详解
2016/12/04 Python
Python用threading实现多线程详解
2017/02/03 Python
Python利用imshow制作自定义渐变填充柱状图(colorbar)
2020/12/10 Python
css3类选择器之结合元素选择器和多类选择器用法
2017/03/09 HTML / CSS
Gweniss格温妮丝女包官网:英国纯手工制造潮流包包品牌
2018/02/07 全球购物
基层干部2014全国两会学习心得体会
2014/03/10 职场文书
总经理人事任命书
2014/06/05 职场文书
大学奖学金获奖感言
2014/08/15 职场文书
党支部活动策划方案
2014/08/18 职场文书
学习普通话的体会
2014/11/07 职场文书
医疗纠纷调解协议书
2015/08/06 职场文书
IDEA中sout快捷键无效问题的解决方法
2022/07/23 Java/Android