通过监听滚动事件并结合 getBoundingClientRect() 判断元素是否在视口内，动态控制按钮 B 的显隐状态，确保两个 checkout 按钮不会同时可见。
通过监听滚动事件并结合 `getboundingclientrect()` 判断元素是否在视口内，动态控制按钮 b 的显隐状态，确保两个 checkout 按钮不会同时可见。
在电商购物车页面中，常需兼顾用户体验与界面简洁性：一个位于页面中部的「Go To Checkout」按钮（Button A）随滚动自然呈现；另一个则作为固定（sticky）按钮（Button B）始终悬浮于可视区域，方便用户随时结算。但二者不应同时显示——否则会造成视觉冗余和操作干扰。本文将提供一套轻量、可靠、无需第三方库的原生 JavaScript 解决方案。
核心原理：精准判断元素是否在视口内
关键在于修正原始 isInViewport 函数的逻辑边界。原始代码中 rect.top >= 0 && rect.bottom 完全在视口内，而实际需求是：只要 Button A 的任意部分出现在视口内，就隐藏 Button B。因此应采用更宽松的判定条件：
function isInViewport(el) {
const rect = el.getBoundingClientRect();
return (
rect.top 0 &&
rect.left 0
);
}
该逻辑表示：元素的顶部尚未滚出视口底部（rect.top 0），即存在垂直方向交集；同理校验水平方向。这是行业通用的“部分可见”判定方式。
完整实现代码（含 HTML/CSS/JS）
<!-- Button A: 页面中部的 checkout 按钮 -->
<div id="horizontalCheckoutBottomPageButtonA">
<div class="cart-section">
<button id="CheckOutA" class="button button--regular" type="submit" name="checkout" form="cart">Go To Check Out ></button>
</div>
</div>
<!-- Button B: 固定定位的 sticky 按钮 -->
<div id="horizontalCheckoutBottomPageButtonB">
<div class="container--large container--vertical-space">
<button id="CheckOutB" class="button button--regular button--outline sticky-buttonzzz" type="submit" name="checkout" form="cart">Check Out ></button>
</div>
</div>
/* 确保 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 0 &&
rect.left 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 协调需求。
