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的温度计动画效果
Jun 18 Javascript
JQuery中clone方法复制节点
May 18 Javascript
JavaScript的jQuery库插件的简要开发指南
Aug 12 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
Jan 28 Javascript
深入浅析JavaScript中数据共享和数据传递
Apr 25 Javascript
Bootstrap缩略图的创建方法
Mar 22 Javascript
Node.js 的模块知识汇总
Aug 16 Javascript
简单实现jQuery手风琴效果
Aug 18 jQuery
浅谈vue-router 路由传参的方法
Dec 27 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
May 07 Javascript
vue 移动端记录页面浏览位置的方法
Mar 11 Javascript
Angular利用HTTP POST下载流文件的步骤记录
Jul 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
Linux下CoreSeek及PHP扩展模块的安装
2012/09/23 PHP
PHP eval函数使用介绍
2013/12/08 PHP
php中出现空白页的原因及解决方法汇总
2014/07/08 PHP
Zend Framework基于Command命令行建立ZF项目的方法
2017/02/18 PHP
js中判断控件是否存在
2010/08/25 Javascript
iframe子页面获取父页面元素的方法
2013/11/05 Javascript
js中取得变量绝对值的方法
2015/01/03 Javascript
jQuery中removeProp()方法用法实例
2015/01/05 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
2015/09/06 Javascript
jquery实现横向图片轮播特效代码分享
2015/11/19 Javascript
关于javascript的一些知识以及循环详解
2016/09/12 Javascript
jQuery使用ajax_动力节点Java学院整理
2017/07/05 jQuery
vue.js 实现输入框动态添加功能
2018/06/25 Javascript
javascript实现移动端红包雨页面
2020/06/23 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
2020/07/11 Javascript
基于scrapy实现的简单蜘蛛采集程序
2015/04/17 Python
Python自定义线程池实现方法分析
2018/02/07 Python
Django中信号signals的简单使用方法
2019/07/04 Python
matplotlib.pyplot画图并导出保存的实例
2019/12/07 Python
Python正则表达式学习小例子
2020/03/03 Python
Python3安装模块报错Microsoft Visual C++ 14.0 is required的解决方法
2020/07/28 Python
加拿大拼图大师:Puzzle Master
2020/12/28 全球购物
写一个在SQL Server创建表的SQL语句
2012/03/10 面试题
2014升学宴答谢词
2014/01/26 职场文书
党员2014两会学习心得体会
2014/03/17 职场文书
2014年教师政治学习材料
2014/06/02 职场文书
行政执法队伍作风整顿个人剖析材料
2014/10/11 职场文书
工会2014法制宣传日活动总结
2014/11/01 职场文书
2015年教育实习工作总结
2015/04/24 职场文书
社区禁毒宣传活动总结
2015/05/07 职场文书
法人身份证明书
2015/06/18 职场文书
幼儿园安全教育随笔
2015/08/14 职场文书
python 通过使用Yolact训练数据集
2021/04/06 Python
测量JavaScript函数的性能各种方式对比
2021/04/27 Javascript
python中取整数的几种方法
2021/11/07 Python
html中两种获取标签内的值的方法
2022/06/10 HTML / CSS