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之$(document).ready()使用介绍
Apr 05 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
Mar 18 Javascript
javascript验证身份证完全方法具体实现
Nov 18 Javascript
jquery插件jTimer(jquery定时器)使用方法
Dec 23 Javascript
node.js中的url.resolve方法使用说明
Dec 10 Javascript
浅谈JavaScript中Date(日期对象),Math对象
Feb 05 Javascript
Javascript递归打印Document层次关系实例分析
May 15 Javascript
基于Bootstrap实现图片轮播效果
May 22 Javascript
通过javascript进行UTF-8编码的实现方法
Jun 27 Javascript
JavaScript中Array的实用操作技巧分享
Sep 11 Javascript
玩转Koa之koa-router原理解析
Dec 29 Javascript
Angular8 实现table表格表头固定效果
Jan 03 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 at(@)符号的用法简介
2009/07/11 PHP
php实现爬取和分析知乎用户数据
2016/01/26 PHP
php 7新特性之类型申明详解
2017/06/06 PHP
phpMyAdmin通过密码漏洞留后门文件
2018/11/20 PHP
实例讲解PHP表单
2020/06/10 PHP
用JavaScript显示随机图像或引用
2009/04/21 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
2014/04/16 Javascript
js表头排序实现方法
2015/01/16 Javascript
详细分析使用AngularJS编程中提交表单的方式
2015/06/19 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
2015/08/05 Javascript
ReactJs快速入门教程(精华版)
2016/11/28 Javascript
探索Javascript中this的奥秘
2016/12/11 Javascript
超全面的vue.js使用总结
2017/02/12 Javascript
网页中右键功能的实现方法之contextMenu的使用
2017/02/20 Javascript
Vue2学习笔记之请求数据交互vue-resource
2017/02/23 Javascript
Angularjs分页查询的实现
2017/02/24 Javascript
javascript中json对象json数组json字符串互转及取值方法
2017/04/19 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
2017/07/09 Javascript
详解webpack+express多页站点开发
2017/12/22 Javascript
vue弹窗插件实战代码
2018/09/08 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
2019/06/18 Javascript
JS操作字符串转数字的常见方法示例
2019/10/29 Javascript
[02:55]2018DOTA2国际邀请赛勇士令状不朽珍藏Ⅲ饰品一览
2018/08/01 DOTA
在Python中使用base64模块处理字符编码的教程
2015/04/28 Python
python 在指定范围内随机生成不重复的n个数实例
2019/01/28 Python
12个步骤教你理解Python装饰器
2019/07/01 Python
python3中for循环踩过的坑记录
2020/12/14 Python
机械设计及其自动化求职推荐信
2014/02/17 职场文书
总结表彰大会主持词
2014/03/26 职场文书
小学班主任评语大全
2014/04/23 职场文书
2014年学校党建工作汇报材料
2014/11/02 职场文书
2015年校长新年寄语
2014/12/08 职场文书
2015年创先争优工作总结
2015/05/23 职场文书
Python控制台输出俄罗斯方块的方法实例
2021/04/17 Python
Python万能模板案例之matplotlib绘制直方图的基本配置
2022/04/13 Python