jQuery实现页面滚动时智能浮动定位
话不多说，请看代码：
<!DOCTYPEhtml>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>jQuery实现页面滚动时层智能浮动定位_前端开发</title>
<styletype="text/css">
*{
margin:0;
padding:0;
}
body{
font:12px/1.8Arial;
color:#666;
}
h1.tit-h1{
font-size:38px;
text-align:center;
margin:30px015px;
color:#f60;
}
.wrap{
border:1pxdashed#ccc;
background:#f8f8f8;
padding:20px;
}
.demo{
height:1500px;
}
.float{
width:80px;
padding:10px;
border:1pxsolid#ffecb0;
background-color:#fffee0;
-moz-box-shadow:1px1px2pxrgba(0,0,0,.2);
-webkit-box-shadow:1px1px2pxrgba(0,0,0,.2);
box-shadow:1px1px2pxrgba(0,0,0,.2);
position:absolute;
right:10%;
top:131px;
}
</style>
<scripttype="text/javascript"src="../..content/js/jquery-1.4.4.min.js"></script>
</head>
<body>
<h1class="tit-h1">jQuery实现页面滚动时层智能浮动定位_前端开发</h1>
<divclass="wrap">
<divclass="demo"></div>
<divclass="float"id="float">我在这里等你噢！</div>
</div>
<scripttype="text/javascript">
$.fn.smartFloat=function(){
varposition=function(element){
vartop=element.position().top,pos=element.css("position");
$(window).scroll(function(){
varscrolls=$(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>
</div>
<scripttype="text/javascript">
var_gaq=_gaq||[];
_gaq.push(['_setAccount','UA-20541395-2']);
_gaq.push(['_trackPageview']);
(function(){
varga=document.createElement('script');ga.type='text/javascript';ga.async=true;
ga.src=('https:'==document.location.protocol?'https://ssl':'http://www')+'.google-analytics.com/ga.js';
vars=document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga,s);
})();
</script>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！