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

本文介绍了一种使用JavaScript和jQuery实现的页面元素固定在浏览器底部的效果。通过监听滚动条变化和窗口尺寸调整来动态更新元素的位置,确保该元素始终保持在屏幕底部中央,即使在页面滚动时也能保持相对位置不变。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<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>

效果:


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值