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 相关文章推荐
JavaScript 特殊字符
Apr 05 Javascript
js改变文章字体大小的实例代码
Nov 27 Javascript
JQuery实现图片轮播效果
Sep 15 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
May 10 Javascript
详解如何在Angular中快速定位DOM元素
May 17 Javascript
详解如何使用node.js的开发框架express创建一个web应用
Dec 20 Javascript
移动端(微信等使用vConsole调试console的方法
Mar 05 Javascript
一文搞懂ES6中的Map和Set
May 20 Javascript
vue 实现cli3.0中使用proxy进行代理转发
Oct 30 Javascript
VSCode launch.json配置详细教程
Jun 18 Javascript
JavaScript 实现轮播图特效的示例
Nov 05 Javascript
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
Jun 29 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
phpmyadmin导入(import)文件限制的解决办法
2009/12/11 PHP
ThinkPHP实现简单登陆功能
2017/04/28 PHP
JS编程小常识很有用
2012/11/26 Javascript
用js读、写、删除Cookie代码续篇
2014/12/03 Javascript
很不错的两款Bootstrap Icon图标选择组件
2016/01/28 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
2016/07/09 Javascript
关于Jquery中的事件绑定总结
2016/10/26 Javascript
浅谈pc端rem字体设置的问题
2017/08/03 Javascript
详解react-native-fs插件的使用以及遇到的坑
2017/09/12 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
2017/09/13 Javascript
js实现网页同时进行多个倒计时功能
2019/02/25 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
2019/03/30 Javascript
[49:28]VP vs Optic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
CentOS下Python3的安装及创建虚拟环境的方法
2018/11/28 Python
python实现根据文件关键字进行切分为多个文件的示例
2018/12/10 Python
Django 创建新App及其常用命令的实现方法
2019/08/04 Python
Django REST框架创建一个简单的Api实例讲解
2019/11/05 Python
Python3 实现减少可调用对象的参数个数
2019/12/20 Python
浅谈tensorflow模型保存为pb的各种姿势
2020/05/25 Python
详解python安装matplotlib库三种失败情况
2020/07/28 Python
浅析Python 字符编码与文件处理
2020/09/24 Python
Canvas高级路径操作之拖拽对象的实现
2019/08/05 HTML / CSS
C#基础面试题
2016/10/17 面试题
值传递还是引用传递
2015/02/08 面试题
动物学专业毕业生求职信
2013/10/11 职场文书
自动化系在校本科生求职信
2013/10/23 职场文书
大学自荐信
2013/12/12 职场文书
饭店工作计划书
2014/01/10 职场文书
社区十八大感言
2014/01/19 职场文书
青年安全生产示范岗事迹材料
2014/05/04 职场文书
旅游节目策划方案
2014/05/26 职场文书
《迟到》教学反思
2016/02/24 职场文书
2016年安全生产先进个人事迹材料
2016/02/29 职场文书
matplotlib之pyplot模块实现添加子图subplot的使用
2021/04/25 Python
pytorch中的model=model.to(device)使用说明
2021/05/24 Python
Python matplotlib 利用随机函数生成变化图形
2022/04/26 Python