如何使800px以下屏幕的HTML表单粘性元素保持可见？

我页面里有个ID为homezipform的表单，包含邮编、门牌号输入框和提交按钮，需求是滚动页面时让这个表单固定在页面底部。这个功能在屏幕宽度≥800px时正常，但宽度＜800px的移动端完全不生效。我试过CSS媒体查询和监听touchmove事件都没解决，以下是我的代码：

原始代码 #

HTML #

<div class="page_zip"></div>
<p></p>
<div class="zip_form">
  <form id="homezipform" action="../quote/">
    <input type="text" class="zip_input_smaller" id="zip_input" name="zip_input" placeholder="Your zipcode" />
    <input type="text" class="zip_input_nr" id="huisnummerinputpage" name="huisnummerinputpage" placeholder="House number" />
    <input type="submit" class="zip_submit" value="GO" />
  </form>
  <div class="subzip_info_page">Receive quotations</div>
</div>
</div>
</div>

JavaScript #

// Get the form element by ID
var form = document.getElementById("homezipform");

// Get the offset position of the form
var formOffset = form.offsetTop;

// Function to add the "sticky" class to the form when scrolling
function stickyForm() {
  if (window.pageYOffset >= formOffset) {
    form.classList.add("sticky");
  } else {
    form.classList.remove("sticky");
  }
}

// Add the event listeners to check for scrolling
window.addEventListener("scroll", stickyForm);
window.addEventListener("touchmove", stickyForm);

CSS #

.sticky {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}

问题排查与修复方案 #

1. 动态计算初始偏移值 #

页面加载时直接获取formOffset可能因移动端布局重排（如响应式样式加载、字体渲染完成）导致值不准确。需在页面完全加载后计算，并监听窗口 resize 事件更新：

let form = document.getElementById("homezipform");
let formOffset;

// 初始化/更新表单偏移值
function updateFormOffset() {
  formOffset = form.offsetTop;
}

// 页面加载完成后初始化
window.addEventListener('load', updateFormOffset);
// 窗口大小变化时重新计算
window.addEventListener('resize', updateFormOffset);

function stickyForm() {
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
  if (scrollTop >= formOffset) {
    form.classList.add("sticky");
  } else {
    form.classList.remove("sticky");
  }
}

window.addEventListener("scroll", stickyForm);
window.addEventListener("touchmove", stickyForm);

2. 修复移动端CSS样式冲突 #

移动端可能存在父元素overflow:hidden、默认边距或其他样式覆盖固定定位。强化.sticky样式并通过媒体查询确保移动端生效：

.sticky {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  box-sizing: border-box; /* 确保内边距不超出宽度 */
  padding: 12px; /* 避免内容贴边 */
  background-color: #ffffff; /* 防止被页面内容穿透 */
  box-shadow: 0 -2px 8px rgba(0,0,0,0.1); /* 可选：添加阴影提升视觉层级 */
}

/* 强制移动端样式生效 */
@media (max-width: 799px) {
  .sticky {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
  }
}

3. 检查表单容器的移动端可见性 #

确认.zip_form容器在移动端未被隐藏，添加样式强制显示：

@media (max-width: 799px) {
  .zip_form {
    display: block !important;
    visibility: visible !important;
  }
}

4. 优化滚动事件兼容性 #

部分移动端浏览器对pageYOffset支持不佳，改用兼容写法获取滚动距离（已包含在第一步的JS代码中）。

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