按钮A进入视口时自动隐藏固定按钮B及反向控制方案

核心思路：滚动监听中利用 getBoundingClientRect() 实时判定元素可见性，动态控制按钮 B 的显示与隐藏，确保两个结算按钮不会同时出现。

在电商购物车页面，经常会遇到这样一个交互需求：页面中部放置一个“Go To Checkout”按钮（称为 Button A），它会随页面滚动自然出现在用户视野中；同时，页面底部还有一个固定定位的 sticky 按钮（Button B），便于用户随时点击完成结算。然而，当这两个按钮同时可见时，页面布局会显得杂乱无章，用户操作也容易误触。因此，理想的状态是：当 Button A 进入视口时，Button B 自动隐藏；当 Button A 滚出视口后，Button B 重新显示。下面提供一套轻量、可靠、无需任何第三方库的原生 JavaScript 实现方案。

核心原理：判断元素是否位于视口范围内

关键点在于判断逻辑的边界条件。许多开发者最初会编写一个函数，检测元素是否完全位于视口内，例如rect.top >= 0 && rect.bottom <= window.innerHeight。但实际需求是：只要 Button A 的任意部分出现在视口内，就隐藏 Button B。因此，需要采用更宽松的“部分可见”判定条件。

function isInViewport(el) {
  const rect = el.getBoundingClientRect();
  return (
    rect.top < window.innerHeight &&
    rect.bottom > 0 &&
    rect.left < window.innerWidth &&
    rect.right > 0
  );
}

这段代码的含义是：元素的顶部尚未完全滚出视口底部（rect.top < window.innerHeight），并且底部也未完全滚出视口顶部（rect.bottom > 0），说明垂直方向存在交集。水平方向同理。这是业界通用的“部分可见”判断方式，非常实用。

完整实现代码（含 HTML/CSS/JS）

  

    Go To Check Out >
  



  

    Check Out >
  

/* 确保 Button B 固定定位且不遮挡内容 */
#horizontalCheckoutBottomPageButtonB {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  width: fit-content;
}
/* 隐藏逻辑：推荐使用 visibility 或 opacity，避免布局跳动 */
#CheckOutB.hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none; /* 确保不可点击 */
}
/* 示例样式增强（可选） */
.button {
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  font-weight: 600;
}
.sticky-buttonzzz {
  background-color: #007bff;
  color: white;
}

// 获取 DOM 元素
const buttonA = document.querySelector('#CheckOutA');
const buttonB = document.querySelector('#CheckOutB');

if (!buttonA || !buttonB) {
  console.warn('Checkout buttons not found. Please check IDs.');
  return;
}

// 视口可见性检测函数（支持部分可见）
function isInViewport(el) {
  const rect = el.getBoundingClientRect();
  return (
    rect.top < window.innerHeight &&
    rect.bottom > 0 &&
    rect.left < window.innerWidth &&
    rect.right > 0
  );
}

// 滚动监听：高效节流（推荐生产环境添加）
let ticking = false;
function handleScroll() {
  if (!ticking) {
    requestAnimationFrame(() => {
      const isVisible = isInViewport(buttonA);
      buttonB.classList.toggle('hidden', isVisible);
      ticking = false;
    });
    ticking = true;
  }
}

// 绑定事件（passive 提升滚动性能）
window.addEventListener('scroll', handleScroll, { passive: true });

// 初始化：首次加载时也执行一次判断
handleScroll();

// 可选：监听窗口大小变化（适配响应式）
window.addEventListener('resize', handleScroll);

注意事项与最佳实践

• ✅ 避免 display: none：直接使用 display: none 会导致按钮瞬间消失并触发页面重排（reflow），影响性能与用户体验。推荐组合使用 visibility: hidden + opacity: 0 + pointer-events: none，保持占位且支持平滑过渡。
• ✅ 性能优化：借助 requestAnimationFrame 对滚动事件进行节流，避免高频触发导致卡顿；设置 passive: true 告知浏览器该监听器不会调用 preventDefault()，从而提升滚动流畅度。
• ✅ 健壮性检查：获取 DOM 元素后增加存在性判断，防止因元素未加载或 ID 错误导致脚本中断。
• ⚠️ 兼容性提示：getBoundingClientRect() 在 IE9+ 及所有现代浏览器中均支持；如需兼容旧版 IE，可补充 document.documentElement.scrollTop 回退逻辑（本例中非必需）。
• ? 调试技巧：可在 handleScroll 中临时加入 console.log(isVisible)，或在 DevTools 中手动调用 isInViewport(buttonA) 验证元素位置。

通过以上实现，Button B 会在用户滚动至 Button A 可见区域时自动淡出隐藏；当 Button A 滚出视口后立即恢复显示。逻辑清晰、性能可控、体验自然，完美满足多入口 checkout 场景下的 UI 协调需求。