<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
*{margin:0;padding:0;
}
#content{
width:960px; margin:0 auto; height:30px; border:solid 1px Red; background:red;
}
#floatTest{
background:Yellow;
border:solid 1px Red;
height:50px;
width:200px;
z-index:100;
}
</style>
<script src="Scripts/jq.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery.fn.myFloat = function (sets) {
setEnd = $.extend({
parentEle: $("body"), //父元素
top: "30px", //绝对定位
right: "0px", //绝对定位
topDistance: "0" //最终距离浏览器顶端高度
}, sets || {});
var $this = $(this);
//先在初始位置删除，填充到父元素中
$this.remove().appendTo(setEnd.parentEle);
//父元素绝对定位
setEnd.parentEle.css("position", "relative");
//更改该区域的样式和定位方式
$this.css({ "position": "absolute", "top": setEnd.top, "right": setEnd.right });
var parOffHeight = setEnd.parentEle.attr("offsetTop");
var distance = parseInt(setEnd.topDistance);
var topInt = parseInt(setEnd.top);
var totalTop = parOffHeight + topInt - distance;
$(window).scroll(function () {
var scroTop = $(window).scrollTop();
if (scroTop < totalTop) {
$this.animate({ "top": setEnd.top }, 10);
} else {
//。。。
var endTop = (topInt + scroTop - totalTop) + "px";
$this.animate({ "top": endTop }, 10);
}
});
//jQuery链式风格要求必须返回当前的jQuery对象
return $this;
};
/*
jQuery.fn.floatTest = function (distanceTop) {
var $this = $(this); //这里的this是指当前的jQuery对象
$this.css({ position: "absolute" });
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").myFloat({ parentEle: $("#c"), top: "50px", topDistance: "20px" });
})
</script>
</head>
<body style="margin:0">
<div style="height:200px;"></div>
<div id="floatTest" style="">aaaa</div>
<div id="content">
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="c">aaaaaaaaaaaaaaaaaaa</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</body>
</html>
View Code
