第一次写插件，基于jQuery的

最新推荐文章于 2025-09-05 11:22:47 发布

转载最新推荐文章于 2025-09-05 11:22:47 发布 · 64 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/sirzxj/archive/2011/07/26/2174074.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用jQuery实现的浮动元素随页面滚动而固定的技巧。该方法通过监听页面滚动事件，结合父元素的位置信息调整浮动元素的位置，使得元素能够在特定条件下始终保持在用户的可见范围内。

<!DOCTYPE html>

<html>
<head>
 <title></title>
 <style>
 #content{
 width:960px; margin:0 auto; height:30px; border:solid 1px Red; background:red; position:relative;
 }
 #floatTest{
 background:Yellow;
 border:solid 1px Red;
 height:50px;
 right:10px;
 position:absolute;
 top:30px;
 width:200px;
 z-index:100;
 }

</style>
<script src="http://zxj2634.blog.163.com/blog/Scripts/jq.min.js" type="text/javascript"></script>
<script type="text/javascript">
 /**
 * 要求，有个父元素 position 为 relative
 * 参数 distanceTop 距离顶端距离(为空则默认为0)
 * @example
 * $("#floatTest").float("20px");
 */
 jQuery.fn.floatTest = function (distanceTop) {
 var $this = $(this); //这里的this是指当前的jQuery对象
 var initTop = $this.css("top");
 var lengthTop;
 //先取得距离顶部的高度lenghtTop = 父元素的高度 + 父元素距离顶部的高度
 var getParent = $this.parent();
 if (typeof distanceTop === "undefined") {
 lengthTop = getParent.attr("offsetTop") + getParent.height();
 } else {
 var space = parseInt(distanceTop);
 lengthTop = getParent.attr("offsetTop") + getParent.height() - space;
 }
 //页面滚动
 $(window).scroll(function () {
 var changeTop = $(window).scrollTop();
 //滚动的高度小于初始高度
 if (changeTop < lengthTop) {
 $this.animate({ top: initTop }, 10);
 } else { //滚动的高度小于初始高度
 var toTop = (parseInt(initTop) + changeTop - lengthTop) + "px";
 $this.animate({ top: toTop }, 10);
 }
 });
 }
 $(function () {
 $("#floatTest").floatTest("20px");
 })
</script>
</head>
<body style="margin:0">
 <div style="height:200px;"></div>
 <div id="content">
 <div id="floatTest" style="">aaaa</div>
 </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

</body>
</html>

转载于:https://www.cnblogs.com/sirzxj/archive/2011/07/26/2174074.html