手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jQuery简单实现页面元素置顶时悬浮效果示例
jQuery简单实现页面元素置顶时悬浮效果示例
摘要:本文实例讲述了jQuery简单实现页面元素置顶时悬浮效果的方法。分享给大家供大家参考,具体如下:一、JSCode:$.fn.smartFlo...

本文实例讲述了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实现表格行上下移动和置顶效果

jQuery实现转动随机数抽奖效果的方法

jQuery实现鼠标经过图片变亮其他变暗效果

jQuery实现自动滚动到页面顶端的方法

jQuery获取页面元素绝对与相对位置的方法

JQuery分屏指示器图片轮换效果实例

EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)

基于jquery实现下拉框美化特效

JavaScript实现列表分页功能特效

javascript实现table选中的行以指定颜色高亮显示

精品推荐
分类导航