真爱无限的知识驿站

学习积累技术经验,提升自身能力

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>
 

效果:

 


发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

Powered By Z-BlogPHP 1.7.3

Copyright 2024-2027 pukuimin Rights Reserved.
粤ICP备17100155号