如何让position: fixed元素在特定位置停止固定，避免与footer重叠？

问题描述 #

设置了position: fixed的「Book Now」按钮会跟随页面滚动，但滚动到页面底部时会遮挡Footer，需要让按钮在Footer上方停止滚动。

解决方案 #

通过JavaScript监听页面滚动事件，结合CSS动态切换按钮的定位方式，实现按钮在Footer上方固定的效果。

步骤1：调整HTML结构 #

给按钮外层添加容器类，方便后续定位控制：

<div class="content">
  <!-- 其他内容保持不变 -->
  <div class="book-button-wrapper">
    <a href="https://www.airbnb.com/h/paradisopiccolo">
      <button class="button-24" role="button">Book Now!</button>
    </a>
  </div>
</div>

步骤2：修改CSS样式 #

• 调整按钮固定定位的基准，改用bottom代替top，简化与Footer的距离计算
• 添加stuck类用于切换定位方式
• 给内容容器增加底部内边距，避免按钮遮挡底部内容

/* 原.button-24样式修改 */
.button-24 {
  position: fixed;
  bottom: 20px; /* 默认距离视口底部20px */
  left: 50%;
  transform: translateX(-50%); /* 水平居中 */
  /* 保留原有背景、边框、字体等样式 */
}

/* 按钮切换为绝对定位的样式 */
.button-24.stuck {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* 修改.content样式，预留按钮空间 */
.content {
  position: relative;
  padding: 20px 1px;
  padding-left: 2.5%;
  /* 预留按钮高度+间距的空间，避免内容被遮挡 */
  padding-bottom: calc(60px + 30px);
}

步骤3：添加JavaScript滚动监听 #

监听页面滚动，计算Footer与按钮的位置关系，动态切换按钮的定位状态：

const bookButton = document.querySelector('.button-24');
const footer = document.querySelector('footer');

// 按钮与Footer之间的间距
const spacing = 20;

function adjustButtonPosition() {
  const footerRect = footer.getBoundingClientRect();
  const buttonHeight = bookButton.offsetHeight;
  const viewportHeight = window.innerHeight;

  // 当Footer进入视口，且按钮即将触碰Footer时
  if (footerRect.top <= viewportHeight - buttonHeight - spacing) {
    const footerHeight = footer.offsetHeight;
    bookButton.classList.add('stuck');
    bookButton.style.bottom = `${footerHeight + spacing}px`;
  } else {
    // 恢复固定定位
    bookButton.classList.remove('stuck');
    bookButton.style.bottom = '20px';
  }
}

// 页面加载时初始化一次
adjustButtonPosition();
// 绑定滚动事件
window.addEventListener('scroll', adjustButtonPosition);

原理说明 #

1. 默认状态下按钮使用fixed定位，跟随页面滚动并保持在视口底部居中
2. 当页面滚动到Footer即将进入视口时，切换按钮为absolute定位，相对于内容容器固定在Footer上方
3. 页面向上滚动离开Footer区域时，按钮恢复fixed定位，继续跟随滚动

内容的提问来源于stack exchange，提问作者Charlie