如何使用 jQuery 使元素粘在屏幕底部？答案

【问题标题】：How to make element stick on the bottom of the screen with jQuery?如何使用 jQuery 使元素粘在屏幕底部？
【发布时间】：2026-01-22 16:00:01
【问题描述】：

我有一个 div 元素，当网页加载并放置在其他 div 元素之间时，该元素是否可见。这是代码示例：

<style>
  .block {
    width: 100%;
    height: 500px;
    /* Height will be dynamic. It's just to test when element is not visible on initial view */
    background: yellow;
  }
  
  .sticking-block {
    width: 100%;
    height 30px;
    /* Height will be dynamic */
    background: red;
  }
  
  .sticking-block.sticky {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 999;
  }
</style>

<div class="block">some content
</div>
<div class="block">some content
</div>
<div class="block">some content
</div>
<div class="block">some content
</div>
<div class="sticking-block">this block sticks to the bottom
</div>
<div class="block">some content
</div>
<div class="block">some content
</div>

所以我想添加类“.sticky”，当浏览器窗口底部到达“.sticking-block”元素的底部并在滚动到网页底部时保持固定。或者在再次向上滚动并到达元素的先前位置时删除“.sticky”类。 “.sticking-block”在初始视图上是否可见，取决于“.block”元素的高度。

当然是一些高度计算。感谢您的帮助。

【问题讨论】：

标签： javascript jquery html css sticky

【解决方案1】：

您可以使用 jQuery 轻松做到这一点。这是解决方案。请检查。

    <html>
  <head></head>
  <body>


<style>
  .block {
    width: 100%;
    height: 500px;
    /* Height will be dynamic. It's just to test when element is not visible on initial view */
    background: yellow;
  }
  
  .sticking-block {
    width: 100%;
    height 30px;
    /* Height will be dynamic */
    background: red;
  }
  
  .sticking-block.sticky {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 999;
  }
</style>

<div class="block">some content
</div>
<div class="block">some content
</div>
<div class="block">some content
</div>
<div class="block">some content
</div>
<div class="sticking-block">this block sticks to the bottom
</div>
<div class="block">some content
</div>
<div class="block">some content
</div>
    
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>


<script>
  var $sticky = $('.sticking-block');
  var stickytop = $sticky.offset().top;
  
  $(window).scroll(function(){
    var scroll = $(window).scrollTop() + $(window).height();
    
    if (scroll >= stickytop) $sticky.addClass('sticky');
    else $sticky.removeClass('sticky');
  });
</script>
  </body>
</html>

【讨论】：

【解决方案2】：

你有问题。试试这个例子。希望这会对你有所帮助。

试试这个：

<div class="block">some content</div>
<div class="block">some content</div>
<div class="block">some content</div>
<div class="block">some content</div>
<div class="sticking-block">
  <div class="sticky">this block sticks to the bottom</div>
</div>
<div class="block">some content</div>
<div class="block">some content</div>

.block {
    position:relative;
    width: 100%;
    background: yellow;
 }
 .sticking-block {
   position:absolute;
   bottom:0;
   left:0;
   width: 100%;
   height: 30px; 
   background: red;
 }
 .sticking-block .sticky {
   position: fixed;
   bottom: 0;
   width: 100%;
   z-index: 999;
 }

【讨论】：