jQuery获取元素距离页面底部的距离，大于0时变为固定定位

最新推荐文章于 2024-08-12 15:18:18 发布

差点是美男****

最新推荐文章于 2024-08-12 15:18:18 发布

阅读量3.2k

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/qq_44657868/article/details/113425956

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了当网页内容过少时，底部元素自动上浮导致页面底部出现大片空白的常见问题。通过JavaScript，我们可以获取元素距离顶部的距离和浏览器可视区域高度，然后计算元素距离底部的距离。如果该距离大于0，可以为底部元素添加固定定位CSS，从而避免空白区域的出现。这种方法有助于改善网页布局和用户体验。

摘要由CSDN通过智能技术生成

有时候由于页面东西太少，导致底部的元素自动浮上来，导致底部留有一大片空白，影响美观。

js中只能获取元素距离顶部top跟距离左边left的距离。响应获得元素距离底部的距离，则：使用浏览器可视区域的高度 - 元素距离顶部的距离 = 元素距离底部的距离

<div class="bottom">我的页面最底部元素</div>
<script>
// 获取元素距离顶部的距离跟可视区域的高度
 var b_top = $('.bottom').offset().top; 
 var window_height = $(window).height();  
 // 相减
  if (window_height - b_top > 0){  
  		// 添加固定定位css
       $('.bottom').addClass('navbar-fixed-bottom');
  }
 </script>