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 相关文章推荐
24款非常有用的 jQuery 插件分享
Apr 06 Javascript
jquery 表格的增行删行实现思路
Mar 21 Javascript
浅谈 javascript 事件处理
Jan 04 Javascript
jQuery中的siblings用法实例分析
Dec 24 Javascript
JavaScript和JQuery获取DIV值的方法示例
Mar 07 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
Aug 24 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
vue踩坑记-在项目中安装依赖模块npm install报错
Apr 02 Javascript
Vue中的this.$options.data()和this.$data用法说明
Jul 26 Javascript
JS实现多功能计算器
Oct 28 Javascript
vue路由实现登录拦截
Mar 24 Vue.js
vue @click.native 绑定原生点击事件
Apr 22 Vue.js
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批量删除数据库下所有前缀为prefix_的表
2014/06/09 PHP
关于扩展 Laravel 默认 Session 中间件导致的 Session 写入失效问题分析
2016/01/08 PHP
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
详解phpstorm2020最新破解方法
2020/09/17 PHP
PHP 实现重载
2021/03/09 PHP
js 强制弹出窗口代码研究-又一款代码
2010/03/20 Javascript
深入理解JavaScript系列(16) 闭包(Closures)
2012/04/12 Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
2012/12/19 Javascript
JQuery 中几个类选择器的简单使用介绍
2013/03/14 Javascript
js中对象的声明方式以及数组的一些用法示例
2013/12/11 Javascript
js判断是否按下了Shift键的方法
2015/01/27 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
2016/08/31 Javascript
AngularJS ng-style中使用filter
2016/09/21 Javascript
BootStrap Datetimepicker 汉化的实现代码
2017/02/10 Javascript
nodejs 使用 js 模块的方法实例详解
2018/12/04 NodeJs
Vue.js项目实战之多语种网站的功能实现(租车)
2019/08/07 Javascript
JS+CSS实现动态时钟
2021/02/19 Javascript
python发送arp欺骗攻击代码分析
2014/01/16 Python
Python 冒泡,选择,插入排序使用实例
2015/02/05 Python
Python+request+unittest实现接口测试框架集成实例
2018/03/16 Python
python 读取txt,json和hdf5文件的实例
2018/06/05 Python
python 构造三维全零数组的方法
2018/11/12 Python
Python 利用pydub库操作音频文件的方法
2019/01/09 Python
Python模块的加载讲解
2019/01/15 Python
pytorch:torch.mm()和torch.matmul()的使用
2019/12/27 Python
PHP两种查询函数array/row的区别
2013/06/03 面试题
员工自我鉴定范文
2013/10/06 职场文书
市场专员岗位职责
2014/02/14 职场文书
开学典礼主持词
2014/03/19 职场文书
培训班开班仪式主持词
2014/03/28 职场文书
党的群众路线教育实践方案
2014/05/11 职场文书
公司行政专员岗位职责
2014/08/24 职场文书
高中生综合素质评价范文
2015/08/18 职场文书
MySQL Innodb关键特性之插入缓冲(insert buffer)
2021/04/08 MySQL
JDBC连接的六步实例代码(与mysql连接)
2021/05/12 MySQL
总结Python连接CS2000的详细步骤
2021/06/23 Python