本文实例讲述了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 id="float"> 我是置顶时悬浮的区域</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插件pagewalkthrough实现引导页效果
★ EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
★ Javascript中prototype属性实现给内置对象添加新的方法