jQuery简单实现页面元素置顶时悬浮效果示例
更新时间：2016年08月01日 12:02:50 作者：Quber
这篇文章主要介绍了jQuery简单实现页面元素置顶时悬浮效果的方法,涉及jQuery针对页面元素样式的动态操作技巧,需要的朋友可以参考下
本文实例讲述了jQuery简单实现页面元素置顶时悬浮效果的方法。分享给大家供大家参考，具体如下：
一、JS Code：
<script type="text/javascript">
$.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: pos,
top: top
});
}
});
};
return $(this).each(function () {
position($(this));
});
};
//绑定
$("#float").smartFloat();
</script>
二、Html Code：
<div class="float" id="float" style="border: 1px solid #e0e0e0; padding: 10px;"> 我是置顶时悬浮的区域</div> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》、《jQuery form操作技巧汇总》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关文章
phpcms的地区级联菜单，感觉写的挺有意思于是自己也实现了个，感兴趣的各位路过的可以参考下哈，希望本例可以帮助到你2013-03-03
jQuery弹层插件jquery.fancybox.js用法实例
这篇文章主要介绍了jQuery弹层插件jquery.fancybox.js用法,结合实例形式分析了jQuery弹出层插件jquery.fancybox.js的功能、用法与相关注意事项,需要的朋友可以参考下2016-01-01
本章继续我们的JQuery选择器的学习旅程 首先照上一章一样，提供我学习用的例子2009-07-07
本文主要是介绍了jQuery中on方法及trigger方法，以及围绕这个方法来体验的观察者模式，是篇非常不错的文章，对我们理解观察者模式很有帮助。2014-12-12
这篇文章主要介绍了jQuery中队列queue()函数的实例教程,queue()函数为JavaScript函数的执行顺序控制操作提供了便利,需要的朋友可以参考下2016-05-05
jQuery修改li下的样式以及li下的img的src的值的方法
这篇文章主要为大家介绍了jQuery如何修改li下的样式，以及修改li下的img的src的值，示例代码很简单，一看就会2014-11-11
这篇文章主要介绍了基于JQuery打造无缝滚动新闻步骤,结合实例形式详细分析了jQuery实现无缝滚动新闻效果的具体步骤与相关实现代码与注意事项,需要的朋友可以参考下2016-03-03
jQuery中select与datalist制作下拉菜单时的区别浅析
一般我们通常使用select制作下拉菜单，但是H5之后，datalist也可以充当select的角色，而且两者还有一点小的不同。具体区别详解小编通过本文给简单介绍下2016-12-12
这篇文章主要介绍了jQuery 操作input中radio的技巧的相关资料,非常不错，具有参考借鉴价值，感兴趣的朋友一起看下吧2016-07-07
这篇文章主要介绍了jQuery如何设置和获取HTML、文本和值,需要的朋友可以参考下2014-07-07
最新评论