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 相关文章推荐
setTimeout和setInterval的浏览器兼容性分析
Feb 27 Javascript
js常见表单应用技巧
Jan 09 Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
Apr 11 Javascript
js实现图片放大和拖拽特效代码分享
Sep 05 Javascript
javascript 判断两个日期之差的示例代码
Sep 05 Javascript
jQuery获取DOM节点实例分析(2种方式)
Dec 15 Javascript
解决vue的变量在settimeout内部效果失效的问题
Aug 30 Javascript
vue 点击按钮增加一行的方法
Sep 07 Javascript
说说如何在Vue.js中实现数字输入组件的方法
Jan 08 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
Jun 18 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
Nov 09 Javascript
JavaScript的console命令使用实例
Dec 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
adodb与adodb_lite之比较
2006/12/31 PHP
php+ajax做仿百度搜索下拉自动提示框(有实例)
2012/08/21 PHP
php计算程序运行时间的简单例子分享
2014/05/10 PHP
php简单实现sql防注入的方法
2016/04/22 PHP
laravel 字段格式化 modle 字段类型转换方法
2019/09/30 PHP
从阿里妈妈发现的几个不错的表单验证函数
2007/09/21 Javascript
利用jQuery的$.event.fix函数统一浏览器event事件处理
2009/12/21 Javascript
js判断屏幕分辨率的代码
2013/07/16 Javascript
JS复制到剪贴板示例代码
2013/10/30 Javascript
单击某一段文字改写文本颜色
2014/06/06 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
2014/08/22 Javascript
Javascript函数的参数
2015/07/16 Javascript
javascript实现查找数组中最大值方法汇总
2016/02/13 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
2016/07/22 Javascript
用js实现简单算法的实例代码
2016/09/24 Javascript
微信小程序  checkbox组件详解及简单实例
2017/01/10 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
2017/01/12 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
2017/07/04 Javascript
在vue中获取token,并将token写进header的方法
2018/09/26 Javascript
VUE组件中的 Drawer 抽屉实现代码
2019/08/06 Javascript
js 解析 JSON 数据简单示例
2020/04/21 Javascript
python requests 使用快速入门
2017/08/31 Python
python实现彩色图转换成灰度图
2019/01/15 Python
python 实现在一张图中绘制一个小的子图方法
2019/07/07 Python
Python+numpy实现矩阵的行列扩展方式
2019/11/29 Python
对python中 math模块下 atan 和 atan2的区别详解
2020/01/17 Python
CSS3 Notes: -webkit-box-reflect实现倒影的实例
2016/12/08 HTML / CSS
纯css3实现宠物小鸡实例代码
2018/10/08 HTML / CSS
梅西百货官网:Macy’s
2020/08/04 全球购物
监理员的岗位职责
2013/11/13 职场文书
搞笑婚礼主持词
2014/03/13 职场文书
大学生感恩父母演讲稿
2014/08/28 职场文书
Keras多线程机制与flask多线程冲突的解决方案
2021/05/28 Python
MySQL系列之三 基础篇
2021/07/02 MySQL
Redis如何实现验证码发送 以及限制每日发送次数
2022/04/18 Redis
Django框架中模型的用法
2022/06/10 Python