如何实现save-settings容器小屏固定底部，滚动后回归原DOM位置？

核心思路 #

通过媒体查询针对小高度移动端生效，结合JavaScript监听滚动事件，动态判断容器是否到达原始文档位置，切换其定位方式：

• 当页面底部未触及容器原始位置时，保持fixed固定在底部
• 当页面底部滚动到容器原始位置时，恢复正常文档流定位，留在footer上方

1. CSS 基础样式 #

先定义容器的默认文档流样式，再通过媒体查询设置小屏幕下的固定样式，同时预留切换类：

/* 默认文档流样式（footer之前的位置） */
.save-settings {
  padding: 1rem;
  background: #fff;
  border-top: 1px solid #eee;
  /* 可添加其他自定义样式 */
}

/* 小高度移动端触发（可根据需求调整height阈值） */
@media (max-height: 600px) {
  /* 固定在底部的类 */
  .save-settings.fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100; /* 避免被其他页面元素覆盖 */
  }
}

2. JavaScript 逻辑实现 #

通过滚动监听计算容器的原始位置，动态切换固定类：

document.addEventListener('DOMContentLoaded', function() {
  const saveContainer = document.querySelector('.save-settings');
  if (!saveContainer) return;

  // 计算容器在文档流中的原始顶部位置（相对于文档顶部）
  let originalTop;
  function updateOriginalTop() {
    // getBoundingClientRect().top是相对于视口的top，加上滚动距离得到文档顶部的绝对位置
    originalTop = saveContainer.getBoundingClientRect().top + window.scrollY;
  }

  // 初始化计算原始位置
  updateOriginalTop();

  // 滚动事件处理逻辑
  function handleScroll() {
    // 页面底部的位置 = 当前滚动距离 + 视口高度
    const pageBottom = window.scrollY + window.innerHeight;

    // 判断是否切换固定状态
    if (pageBottom < originalTop) {
      saveContainer.classList.add('fixed');
    } else {
      saveContainer.classList.remove('fixed');
    }
  }

  // 绑定滚动和窗口resize事件（resize时重新计算位置并更新状态）
  window.addEventListener('scroll', handleScroll);
  window.addEventListener('resize', function() {
    updateOriginalTop();
    handleScroll();
  });

  // 页面初始加载时判断一次状态
  handleScroll();
});

关键细节说明 #

• 原始位置计算：使用getBoundingClientRect()获取容器相对于视口的位置，叠加当前滚动距离，得到容器在文档中的绝对顶部位置，避免父元素定位影响offsetTop的准确性。
• 窗口resize监听：当窗口高度变化时，重新计算容器原始位置并更新状态，适配不同屏幕高度的动态变化。
• z-index设置：固定定位时添加足够高的z-index，确保按钮容器不会被页面其他内容遮挡。
• 媒体查询阈值：可根据实际需求调整max-height的值，比如改为max-height: 700px覆盖更多小高度设备。

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