jQuery页面滚动浮动层智能定位实例代码
更新时间：2011年08月23日 23:23:26 作者：
jQuery页面滚动浮动层智能定位实例代码，需要的朋友可以参考下。
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();
复制代码 代码如下:
<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();
相关文章
这篇文章主要介绍了jQuery经过一段时间自动隐藏指定元素的方法,实例分析了两种比较常用的技巧,非常具有实用价值,需要的朋友可以参考下2015-03-03
这篇文章主要介绍了jQuery封装的屏幕居中提示信息代码,可以很方便的集成到项目开发中使用,涉及jQuery针对页面元素的动态操作技巧,需要的朋友可以参考下2016-06-06
这篇文章主要介绍了jQuery插件实现大图全屏图片相册的方法和示例，基于jQuery插件jQuery.album.js来实现的，效果非常不错，这里推荐给大家，希望大家能够喜欢。2015-03-03
这篇文章主要介绍了jQuery实现分隔条左右拖动功能，需要的朋友可以参考下2015-11-11
jquery validate.js表单验证入门实例（附源码）
这篇文章主要介绍了jquery validate.js表单验证入门实例，为大家提供了jquery validate.js表单验证的源码，特别适合初学者学习validate.js表单验证，感兴趣的小伙伴们可以参考一下2015-11-11
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
这篇文章主要介绍了JQuery通过AJAX从后台获取信息显示在表格上并支持行选中的相关资料,需要的朋友可以参考下2015-09-09
这篇文章主要介绍了jQuery实现的图片轮播效果,结合完整实例形式分析了jQuery结合时间函数动态改变页面元素样式的相关技巧,需要的朋友可以参考下2016-09-09
这篇文章主要介绍了JS中判断null、undefined与NaN的方法,需要的朋友可以参考下2014-03-03
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
Tocify是一个能够动态生成文章节点目录的jQuery插件，通过本文给大家分享jQuery插件之Tocify动态节点目录菜单生成器，对tocify菜单生成器相关知识感兴趣的朋友一起学习吧2016-01-01
基于LayUI分页和LayUI laypage分页的使用示例
本篇文章主要介绍了基于LayUI分页和LayUI laypage分页的使用示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
最新评论