Jquery实现相对浏览器位置固定、悬浮

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var stayBottom = function () {
///相对于浏览器的位置(浏览器的高度+滚动到上面看不到的高度-本身的高度=层顶部到浏览器最上面的高度)
var offsetTop = $(window).height() + $(window).scrollTop() - $("#bottomdiv").height() - 2 + "px";
//$("#bottomdiv").css("top", offsetTop);
$("#bottomdiv").animate({ top: offsetTop, "left": $(window).width() / 2 - $("#bottomdiv").width() / 2 }, { duration: 500, queue: false });
};
$(window).scroll(stayBottom).resize(stayBottom);//在浏览器滚动条变化或大小改变时调用
});
< /script>
< div id="bottomdiv" style="position: absolute; border-style: solid; border-width: thin;
border-color: Gray; height: 50px; bottom: 0;">
固定内容,实现层底部始终与浏览器底部相接,如果位置要往上移,offsetTop里面减去多少就是往上移多少,left里面加多少就是往右移多少
</div>
 

效果:


posted @ 2012-06-24 14:30  真爱无限  阅读(282)  评论(0编辑  收藏  举报