jquery插件的学习：
HTML部分及应用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#float{border: 1px solid #e0e0e0; padding: 10px; position: absolute; width: 170px;}
</style>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/smartFloat.js"></script>
<script>
$(function(){
//插件应用
$("#float").smartFloat({width:"1024px"});//top:原始高度，pos:position的类型,width:到达顶部后的宽度，oWidth:最初的宽度
});
</script>
</head>
<body>
<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="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><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><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><br><br>
</body>
</html>
js部分
/**
* Created by Administrator on 14-9-3.
*/
;(function($){
$.fn.extend({
smartFloat:function(options){
var defaults = {
top:$(this).position().top,//原始高度
pos:$(this).css("position"),//原始的postion类型
width:"100%", //到达顶部后的宽度
oWidth:$(this).width()//最初的宽度
};
var options = $.extend(defaults,options);
var obj = $(this);
$(window).scroll(function(){
var scrolls = $(this).scrollTop();
if(scrolls > options.top){
if(window.navigator.userAgent.indexOf('MSIE 6.0')!=-1){
obj.css({top:scrolls});
}else{
obj.css({
position: "fixed",
top: 0
});
obj.stop().animate({width:options.width});
}
}else{
obj.css({
top:options.top,
position:""
});
obj.stop().animate({width:options.oWidth});
}
});
}
});
})(jQuery);