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 setTimeout()传递函数参数(包括传递对象参数)
Apr 07 Javascript
jquery(live)中File input的change方法只起一次作用的解决办法
Oct 21 Javascript
JS模拟自动点击的简单实例
Aug 08 Javascript
深入理解JS中的变量及作用域、undefined与null
Mar 04 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
Jun 03 Javascript
jQuery中 attr() 方法使用小结
May 03 Javascript
js正则匹配出所有图片及图片地址src的方法
Jun 08 Javascript
详解Angular Reactive Form 表单验证
Jul 06 Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
Dec 26 Javascript
详解ajax的data参数错误导致页面崩溃
Apr 30 Javascript
原生JS实现获取及修改CSS样式的方法
Sep 04 Javascript
微信小程序登录态和检验注册过没的app.js写法
May 22 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
php实现图片缩放功能类
2013/12/18 PHP
PHP递归遍历指定文件夹内的文件实现方法
2016/11/15 PHP
PHP基于递归算法解决兔子生兔子问题
2018/05/11 PHP
JQuery 插件模板 制作jquery插件的朋友可以参考下
2010/03/17 Javascript
jquery选择器使用详解
2014/04/08 Javascript
JavaScript极简入门教程(一):基础篇
2014/10/25 Javascript
学习JavaScript设计模式之代理模式
2016/01/12 Javascript
JavaScript实现时间倒计时跳转(推荐)
2016/06/28 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
2016/11/28 Javascript
JS获取年月日时分秒的方法分析
2016/11/28 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
2017/01/27 Javascript
js中DOM三级列表(代码分享)
2017/03/20 Javascript
原生JavaScrpit中异步请求Ajax实现方法
2017/11/03 Javascript
vue-music关于Player播放器组件详解
2017/11/28 Javascript
vue组件中使用props传递数据的实例详解
2018/04/08 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
2018/08/12 Javascript
ES6的异步终极解决方案分享
2019/07/11 Javascript
js实现无限瀑布流实例方法
2019/09/16 Javascript
jQuery实现动态操作table行
2020/11/23 jQuery
对于Python装饰器使用的一些建议
2015/06/03 Python
在Python程序员面试中被问的最多的10道题
2017/12/05 Python
Python基于动态规划算法解决01背包问题实例
2017/12/06 Python
flask中主动抛出异常及统一异常处理代码示例
2018/01/18 Python
Python响应对象text属性乱码解决方案
2020/03/31 Python
keras Lambda自定义层实现数据的切片方式,Lambda传参数
2020/06/11 Python
详解如何在css3打包后自动追加前缀插件:autoprefixer
2018/12/18 HTML / CSS
html5摇一摇代码优化包括DeviceMotionEvent等等
2014/09/01 HTML / CSS
.NET初级开发工程师面试题(包括Javascript)
2012/08/22 面试题
综合办公室主任职责
2013/12/16 职场文书
安全生产中长期规划实施方案
2014/02/21 职场文书
电子银行营销方案
2014/02/22 职场文书
预备党员群众意见
2015/06/01 职场文书
小学英语教学经验交流材料
2015/11/02 职场文书
教你怎么用Python处理excel实现自动化办公
2021/04/30 Python
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
2021/05/25 Vue.js
使用feign服务调用添加Header参数
2021/06/23 Java/Android